土豆博客

Webpack4使用html-withimg-loader图片路径问题

# 一、概述

安装好以上插件及loader即可打包html中img标签上的图片,但在打包后预览却无法正常显示图片,路径上多出default对象:

 <img src={"default":"xxx"} title="img" />

解决方案

file-loader升级以后,esModule参数默认为true,改为false即可

 {
     test: /\.(jpg|png|gif|bmp|jpeg|jpg)$/,
     use: {
         loader: "file-loader",
         options: {
            name: "[name]_[hash].[ext]",
            esModule: false, //设置为false
            outputPath: "images/"
          }
        }
     },
code
top

扫码添加,一起进步

wechat-code

为了保障最佳预览体验,博客已不支持IE浏览器的访问,邀请您使用以下现代高级浏览器。

谷歌浏览器(推荐) 火狐浏览器

注:如果你使用的是360,QQ等双核浏览器,请开启极速模式