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

السؤال

نشر

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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...