解决 Webpack 打包图片不报错也不显示问题,但其图片就是显示不出来的问题

1、问题描述:

A、在 webpack.config.js 中也添加了代码为:

{
    
    
     test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, 
     use: "url-loader?limit=16940"
}

B、在 ‘.css’ 文件中添加的信息为:

.box {
    
    
    width: 300px;
    height: 300px;
    background: red url(../img/sass.png); 
}

C、但此时就是不能将图片的信息加载出来(但背景颜色能添加出来);
显示结果为:
在这里插入图片描述

2、问题原因:

是因为 Webpack 版本的原因,由于我使用的 Webpack 的版本是 “webpack”: “^5.57.1” ,已经是 5.0 版本及以上了,而采用之前 5.0 版本以下的方法是行不通的;

3、问题解决的方法:

A、在 webpack.config.js 添加的代码修改为:(其余的信息不变)

{
    
    
     test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, 
     type: 'asset'
}

B、此时信息就能显示,显示的图片结果为:
在这里插入图片描述
C、想看文档最好去官网:
网址为:https://webpack.docschina.org/guides/asset-modules/
在这里插入图片描述

4、小结:

哪里有不对或不合适的地方,还请大佬们多多指点和交流!

Guess you like

Origin blog.csdn.net/weixin_43405300/article/details/120745452