一、问题引入
在自定义组件中，引入项目中的图片，使用相对路径引入时，会出现图片无法解析的情况。代码如下：
图片在dom结构中url如下：
可以看到，url路径为src/xxx.png ，src为根路径，图片路径发生了改变！
首先想到应该是url被webpack解析了，看下vue-cli文档：
可以看到，webpack会在编译过程中，将相对路径的资源解析为一个模块。而项目里没有src这个根路径。
二、解决办法
1、 将图片放在static文件夹下：
static文件是不被Webpack处理的，直接写绝对路径来引用static下面的文件，如static/xx.png ，实测有效。
2、 主动引入方式
还有一种使用webpack处理，可以使用require或者import，主动引入图片资源，这样先声明了变量，webpack就会找到正确的路径下的图片资源。
在项目中发现在template模板下，img标签使用src属性相对路径引入url，却不会报错，只有在js逻辑下的代码才会出现这样的情况。这是因为代码开始执行跑在客户端的时候是没有webpack环境的，需要主动引入。template中的img是会通过webpack编译的。
注意：将图片放到assets下和放到static下，打包之后的文件生成路径是不一样的，static下打包之后文件会被放在dist/static下，而asset下会被放在dist/static/img下（默认），当然可以在使用file-loader、url-loader改变配置。
三、总结
本案例涉及前端文件静态资源中图片资源路径的引入问题，对问题产生的原因进行了分析，找到解决问题的几种办法，为项目此类问题提供借鉴意义。
借鉴材料：
欢迎访问小程序：女友睡前故事~
