vue 动态加载图片src的解决办法

记一次vue中图片加载的问题

用js动态加载assets或者本文件的图片出现404的状态码
404代码

<img :src="icon" alt="" />

data() {
    return {
        'icon': '../assets/img/1-2.png'
    }
}

在webpack中会将图片图片来当做模块来用，因为是动态加载的，所以url-loader将无法解析图片地址

解决办法

1. 将图片作为模块加载进去

data() {
    return {
        require('../assets/img/1-2.png')
    }
}

2. 将图片放到static目录下，但必须写成绝对路径

<img src="./static/img/1-2.png" alt="" />