اذهب إلى المحتوى
  • 0

فشل تحميل صور svg عند بناء التطبيق webpack

محمد لارافيل

السؤال

index.js

import icon_marker from './images/icon_marker.svg'

new google.maps.Marker({position, icon: icon_marker})

const test = document.createElement('img').src = icon_marker

webpack.config.js

module: {
      rules: [{
              test: /\.svg/, 
              type: 'asset'
            }] 
        }

لقد جربت كتابة

'asset/resource', 'asset/inline', 'asset/source'

 وقبل هذه الأنواع ، أنواع كثيرة من المحملات. لقد وجدت ملفات صور تم إنشاؤها في مجلد dist ولكن لم يتم تطبيق أي منها. الرجاء مساعدتي 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

هنا المشكلة في الكود الآتي فأنت لم تقم بوضع العنصر img داخل الصفحة بعد عمله 

const test = document.createElement('img').src = icon_marker

هذه الطريقة الصحيحة :

            const img = document.createElement('img');
            img.src =icon_marker;
            document.getElementById('body').appendChild(img);

والطريقة الصحيحة للصور svg 

سنحتاج الي تثبيت مكتبة svgo:

npm install svgo --save-dev

وفي ملف webpack.config.js سيكون الكود هكذا:

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = {
  module: {
    rules: [
      // You need this, if you are using `import file from "file.ext"`, for `new URL(...)` syntax you don't need it
      {
        test: /\.(svg)$/i,
        type: "asset",
      },
    ],
  },
  optimization: {
    minimizer: [
      "...",
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.svgoMinify,
          options: {
            encodeOptions: {
              // Pass over SVGs multiple times to ensure all optimizations are applied. False by default
              multipass: true,
              plugins: [
                // set of built-in plugins enabled by default
                // see: https://github.com/svg/svgo#default-preset
                "preset-default",
              ],
            },
          },

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...