v-for动态渲染img时src属性的处理

一、问题现象

项目中需要渲染一个包含图片的列表。
采用v-for循环渲染，代码简写如下：

 <li v-for="{ pic } in picList">
        <img :src="pic" >
 </li>

picList = [{
        pic: '@/assets/images/mysql.png'
}]

采用了各种字符串拼接方案都不行。

:src = "'@/assets/images/'+'mysql.png'"
:src = "'../../assets/images/'+'mysql.png'"
:src = "`../../assets/images/${mysql.png}`"

二、问题原因

打开控制台发现

明显这是webpack打包之后的结果。 初步推断原因，应该是:src之后绑定的是变量，webpack将图片打包之后，在通过变量得路径去查找资源是找不到的。
assets文件在项目编译的过程中会被webpack处理解析为模块依赖

三、解决方法

参照其他网友的博客整理了两种解决方法：

1. 图片资源放入static目录文件下。webpack不会解析static下的文件。而是直接复制到最终的打包目录(默认是dist/static)下，此时可以使用绝对路径引用static下的文件。
2. :src = require('@/assets/images/'+'mysql.png'采用require动态加载模块，之后src属性可以正确的找到打包之后的资源