问题:在
html
的img
标签路径解析错误,导致加载不出来
一直用框架开发,好久没用过webpack
写原生代码,一下子踩了好多坑…
图片位置:
其中一个就是在html
中写了图片地址:
<!-- src/pages/index.html -->
<img class="img" src="@/assets/images/logo_lw.png" alt="logo">
不管怎么改控制台都显示下面的报错:
看了好多帖子都写的是打包后,图片有问题。但是我是想在webpack-dev-server
下显示出来
解决方案:
1.在js
文件引入:
<img class="img" src="" alt="logo">
// index.js
import img from '@/assets/images/logo_lw.png';
document.querySelector(".img").setAttribute("src", img);
2.webpack.config.js
配置html-loader
// webpack.config.js
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /.html$/,
loader: 'html-loader',
options: {
esModule: false
}
}
]
}
}
(因为html
文件成功加载了,以为不用html-loader
。后来想起webpack
只能理解javascript
和json
,抱着试一下的态度加上去,没想到还真有用)