vue项目中的xx.html文件引入的图片路径该怎么处理？

Question

在vue项目中，大图使用require引入xx.vue文件中，但是里面有个xx.html文件，图片src属性值是相对路径,然后打包出来图片就显示不了

Answer 1

可以先 import img from './图片路径.jpg';

然后做数据绑定

data(){

    return{

         imgUrl: img

    }

}

template中引用

<img :src="imgUrl">

在webpack 要引入img-loader；如果你是vue-cli搭建的，就可以忽略这一条

Answer 2

vue项目根目录下有个static文件夹，静态图片和json等都在这个目录下相对引用，打包之后这个文件夹下的内容会打到发布项目的static，两个路径一致，就可以直接显示了