যখন আমি ওয়েবপ্যাকে ফাইল-লোডার এবং এইচটিএমএল-লোডার ব্যবহার করি। চিত্রের এসআরসি অ্যাটর '[অবজেক্ট মডিউল]' এর মতো হবে

10

আমি স্ক্র্যাচ থেকে ওয়েবপ্যাক 4 নিয়ে একটি প্রকল্প করছি। তবে আমি যখন এইচটিএমএল ফাইলটিতে একটি চিত্র প্রদর্শন করার চেষ্টা করি। আমি একটি তারযুক্ত সমস্যার মুখোমুখি: পরে npm run build। চিত্র ট্যাগ এর src হিসাবে নির্মিত হবে <image src="[object Module]"। এইচটিএমএল অংশটি হল:

<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

— নেলসন
সূত্র

আপনি কীভাবে এইচটিএমএল ফাইলটিতে চিত্রটি প্রদর্শনের চেষ্টা করছেন?

— কেএলপি

দুঃখিত। আমি আমার প্রশ্ন আপডেট করতে চলেছি im এবং আমি এইভাবে করছি: <img src = "./ স্ট্যাটিক / চিত্র / ডেমো.পিএনজি">

— নেলসন

13

esModule: falseফাইল-লোডারটিতে এর মতো বিকল্প যুক্ত করার চেষ্টা করুন :

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

একই ইউআরএল-লোডার ক্ষেত্রে প্রযোজ্য।

EsModule অপশনটি ফাইল-লোডারে সংস্করণ ৪.৩.০ এ চালু করা হয়েছে এবং ৫.০.০ এ এটি ডিফল্টরূপে সত্যে সেট করা হয়েছে যা একটি ব্রেকিং পরিবর্তন হতে পারে।

সূত্র:

— MrSegFaulty
সূত্র

2

আহা! ধন্যবাদ! এটা আমার জন্য কাজ করছে!

— নেলসন

আমি আনন্দিত যে আমি সাহায্য করতে

— পেরেছি

0

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

— আলী
সূত্র