项目场景:
1、给一个div设置背景图;
background: url("/src/image/4.png") no-repeat;
background-size: 100vw 100vh;
2、html的img标签设置图片;
<img id="zi" class="zi" src="/src/image/w.png">
3、动态修改img的src属性
问题描述
1、背景图也找不到,2、img图片找不到,3、动态修改图片img的src时找不到图片。
原因分析:
1、图片未被打包
当使用的图片url是动态拼接的,可能会出现webpack没有检测到该图片被引用的问题,所以打包后图片因为不存在而找不到。
2、图片路径错误
当一个图片被多次引用,当使用的是动态拼接为打包前图片存放的路径会找不到图片,因为打包时会把动态生成的路径直接存下来,不会将其二次转译为打包后相对路径。
3、引入webpack需要下载处理图片的依赖
解决方案:
在webpack。config.js中进行配置
1、背景图的配置
npm i -D url-loader file-loader
// 背景图片处理规则
{
test: /\.(jpg|png|gif|bmp|jpeg)$/,
use: {
loader: "url-loader",
options: {
name: 'image/[name][hash:9].[ext]', // 对打包之后的图片名称进行加密
esModule: false,
limit: 8 * 1024, // 将小于8kb的图片用based64处理
}
},
type: 'javascript/auto' //转换 json 为 js
},
2、html页面中img标签的配置
npm i -D html-withimg-loader
{
test: /\.(htm|html)$/,
loader: 'html-withimg-loader'
}
3、动态修改img的src时,图片找不到的问题
需要使用 require() 去引入图片地址,不然真不能用。
class colorEgg {
keyList: Array<string> = [require("./image/c.png"), require("./image/d.png"), require("./image/e.png"), require("./image/f.png"), require("./image/i.png"), require("./image/n.png"), require("./image/o.png"), require("./image/p.png"), require("./image/t.png"), require("./image/w.png")];
key: string;
constructor(key: string = "./image/c.png") {
this.key = key;
}
changeKey(index: number) {
this.key = this.keyList[index];
const zi = document.getElementById("zi")!;
zi.setAttribute("src", this.key);
}
}
const colorText = new colorEgg();
// 随机取值0-9,一共十张图片
let index: number = Math.floor(Math.random() * 10);
colorText.changeKey(index)
还必须是在定义 keyList 数组的时候使用require().
如果写成:
keyList: Array<string> = ["./image/c.png","./image/d.png", "./image/e.png"];
zi.setAttribute("src", require(this.key));
这样是错误的,还是会报错。