vue 引用src中的文件_Vue项目中img标签src的路径问题

一、问题引入

今天重构之前赶工的项目，父组件通过属性绑定传值给子组件，子组件的图片url在img标签的src属性中相对路径写死的。(路径初始就写在src属性中)

像这种直接写死的没有出现什么问题。

但肯定是要改为父组件传值url过来属性绑定来设置的(毕竟是个组件，写死这组件的复用性就太差了)。此时看了一下运行项目后此图片的路径。

webpack编译后的图片文件夹 img 会直接在根目录，图片的上层目录 sys-head 也被忽略了，图片为了避免重复会默认重名了一个名字(vue-cli3搭建的工程)。

然后现在把子组件的图片 url 也通过属性绑定传过来，url的格式我也按照了这个相对路径写。然后传值过去后属性绑定到src。(路径初始不在src中写好。项目编译后运行后，触发父组件传值到子组件然后设置的图片url；或把 data 中 url 数据属性绑定到 img 的 src)

父组件属性绑定传值：

图片url也是相对路径写法：

//页面数据转化为页面标题块数据

transHeadData(baseData) {

console.log(baseData);

this.headData.mainTile = baseData.name;

this.headData.enname = baseData.enname;

this.headData