Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
391 views
in Technique[技术] by (71.8m points)

file-loader和image-webpack-loader图片不显示

配置如下

  module: {
      rules: [{
        test: /.(gif|png|jpe?g|svg)$/i,
        exclude: path.resolve(__dirname, './src/assets/icons'),
        use: [
          {
            loader: 'file-loader',
            options: {
              esModule: false,
              name: '[path][name].[ext]'
              // useRelativePath: true
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true, // [email protected]
              disable: true // [email protected] and newer
            }
          }]
      }]
    },

页面和css中引入

 <img src="@/assets/images/login/logo.png" >
 
div{  background: url("~@/assets/images/login.gif")};

项目跑起来后,页面图片src进行了base64转换,但图片显示不了,结果如下:

<img data-v-37dfd6fc="" src="data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJzcmMvYXNzZXRzL2ltYWdlcy9sb2dpbi9sb2dvLXdoaXRlLnBuZyI7">

div{
    background: url(data:image/gif;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhf)
}

请问是什么地方配置有问题吗?打包后对应的目录也有相关的文件,但不知道为啥显示不了,而且是系统所有的图片都不能正常显示


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

你好,请问你的问题解决了吗


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...