引入图片的方式
<!-- 相对路径引入 --> <img src="./logo.jpg" alt=""> <!-- 绝对路径引入 --> <img src="@/assets/logo.jpg" alt=""> <!-- 引入static文件, 不会处理 --> <img src="/static/logo.jpg" alt="">
webapck 配置文件
{ test: /\.(jpg|png|gif|jpeg|woff|ttf)$/, use: [ { loader: 'url-loader', options: { esModule: false, // 这里设置为false // 如果图片大小小于这个值,就会被打包为base64格式 limit: 10 * 1000, // 10 kb name: 'img/[name].[hash].[ext]', }, }, ], },
遇到的问题
打包产物中出现了[object Module]
<img src="[object Module]" alt="">
原因是新版本的file-loader选项esModule默认为true ,需要将其设置为false