7 HTML中img标签的图片资源处理

html-css012

7 HTML中img标签的图片资源处理,第1张

url-loader处理了css中背景图片的引用的问题；html中直接使用img标签src加载图片的话，使用copy-webpack-plugin插件是将图片复制到dist目录下，因为没有被依赖，图片将不会被打包， html-withimg-loader 是另一种解决这个问题的方式，图片会被打包，而且路径也会处理妥当。

使用时，只需要在html中正常引用图片即可，webpack会找到对应的资源进行打包，并修改html中的引用路径

html-withimg-loader用来处理html中的img资源，并且其打包规则与url-loader一样；copy-webpack-plugin是从源拷贝到目标位置，如dist目录，变相实现img图片的引用，但并不是经过webpack的打包，更适用于音视频等媒体资源。

1、点击打开html编辑器sublime_text，详细如下图

2、创建一个html文件，然后【创建一个img标签】，详细如下图

3、创建img标签以后，我们给img标签的属性【src添加一张图片的地址】，详细如下图

4、把html文件拖到浏览器中，然后就可以查看加入图片的效果了，详细如下图。