जब मैं वेबपैक में फ़ाइल-लोडर और html-लोडर का उपयोग कर रहा हूं। छवि का src attr '[ऑब्जेक्ट मॉड्यूल] की तरह होने वाला है

10

मैं स्क्रैच से webpack4 के साथ एक परियोजना कर रहा हूं। लेकिन जब मैं HTML फ़ाइल में एक छवि प्रदर्शित करने का प्रयास करता हूं। मुझे एक वायर्ड समस्या का सामना करना पड़ा: आफ्टर npm run build। छवि टैग के src के रूप में बनाया जाएगा <image src="[object Module]"। Html हिस्सा है:

<img src="images/main_background.jpg">

इस webpack.config.jsतरह है:

   // ignore ...
   {
    test: /\.html$/,
    use: [
       {loader: 'html-loader'}
    ]
   },
   {
      test: /\.(jpeg|jpg|png)$/,
      use: [
        'file-loader'
      ]
  }

और इन दो लोडरों का संस्करण:

"file-loader": "^5.0.2",
"html-loader": "^0.5.5",

मुझे पता नहीं है कि क्या समस्या है ...

webpack-4

— नेल्सन
स्रोत

आप HTML फ़ाइल में छवि कैसे प्रदर्शित करने का प्रयास कर रहे हैं?

— केएलपी

माफ़ करना। मैं अपना प्रश्न अपडेट करने जा रहा हूं। और इस तरह से काम कर रहा हूं: <img src = "। / static / images / Demo.png">

— नेल्सन

13

esModule: falseफ़ाइल-लोडर में विकल्प जोड़ने का प्रयास करें जैसे:

  ...
  {
    test: /\.(jpeg|jpg|png)$/,
    use: [
      loader: 'file-loader',
      options: {
        esModule: false
      }
    ]
  }
  ...

वही url-loader पर लागू होता है।

esModule विकल्प 4.3.0 संस्करण में फ़ाइल-लोडर में पेश किया गया है और 5.0.0 में इसे डिफ़ॉल्ट रूप से सही पर सेट किया गया है जो एक ब्रेकिंग परिवर्तन हो सकता है।

सूत्रों का कहना है:

— MrSegFaulty
स्रोत

2

अहा! धन्यवाद! यह मेरे लिए काम कर रहा है!

— नेल्सन

मुझे खुशी है कि मैं मदद कर सका :)

— MrSegFaulty

0

{
    test: /\.(png|jpe?g|gif)$/i,
    loader: 'file-loader',
    options: {
        name: '[name][hash].[ext]',
        outputPath: 'images',
        esModule: false,
    },
},

— अली
स्रोत