webpack中img标签的src使用相对路径的方法

简介

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

webpack目前已经是大部分前端项目打包工具的首选，但是在使用的过程中还是存在一些问题。我们下面要讲到的就是常见的关于图片路径的问题。

tips: 解决方案在最后一节

img的src问题及其原因

在webpack项目中，如果要直接使用 img 的 src 属性来引用图片，由于webpack对html中图片的相对路径的处理方式的问题发现图片并不能正确的引用。webpack对图片的处理方式如下：

官方文档

默认情况下，vue-loader 使用 css-loader 和 Vue 模版编译器自动处理样式和模版文件。在编译过程中，所有的资源路径例如 <img src="…">、background: url(…) 和 @import 会作为模块依赖。

例如，url(./image.png) 会被转换为 require(’./image.png’)，而

<img src="../image.png">