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

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

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


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

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

解决办法

  1. 将图片作为模块加载进去
data() {
    return {
        require('../assets/img/1-2.png')
    }
}
  1. 将图片放到static目录下,但必须写成绝对路径

你可能感兴趣的:(vue 动态加载图片src的解决办法)