关于webpack 静态html中 图片打包的问题

问题描述

问 题

使用file-loader 可以打包css中url的图片 但是对于html中src的图片要怎么打包昵？求各位大神指导

解决方案

比较不帅的做法可以这样，在javascript引入图片：

//ES2015
import imgUrl from 'path/to/xxxx.png';

//CommonJS
var imgUrl = require('path/to/xxxx.png');

然后再在javascript里把html里img的src属性值换成上面拿到的imgUrl就好了。

这种方式简单粗暴，而且解决问题；缺点就是不太帅

相对帅点的做法：

直接使用html-loader加载你的html片段，她会检查你引入的html片段里对图片的引用，都自动替换成上面那种方式。

这篇关于关于webpack 静态html中 图片打包的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！