一、问题引入
- 今天重构之前赶工的项目，父组件通过属性绑定传值给子组件，子组件的图片url在
img标签的src属性中相对路径写死的。（路径初始就写在src属性中）
<img src="../../assets/img/sys-head/thrSys.png">
像这种直接写死的没有出现什么问题。
但肯定是要改为父组件传值url过来属性绑定来设置的（毕竟是个组件，写死这组件的复用性就太差了）。此时看了一下运行项目后此图片的路径。
webpack编译后的图片文件夹 img 会直接在根目录，图片的上层目录 sys-head 也被忽略了，图片为了避免重复会默认重名了一个名字（vue-cli3搭建的工程）。
- 然后现在把子组件的图片 url 也通过属性绑定传过来，url的格式我也按照了这个相对路径写。然后传值过去后属性绑定到
src。（路径初始不在src中写好。项目编译后运行后，触发父组件传值到子组件然后设置的图片url；或把 data 中 url 数据属性绑定到 img 的 src）
父组件属性绑定传值：
<sys-header :headData="headData"></sys-header>
图片url也是相对路径写法：
//页面数据转化为页面标题块数据
transHeadData(baseData) {
console.log(baseData);
this.headData.mainTile = baseData.name;
this.headData.enname = baseData.enname;
this.headData.description = baseData.description;
//根据业务类型写死了（原）
this.headData.pictureUrl = '../../assets/img/sys-head/thrSys.png';
// this.headData.pictureUrl = [headImg,headImg2];
console.log(this.headData.pictureUrl);
this.headData.altName = "";
}
}
子组件接收后设置图片url：
<img :src="headData.pictureUrl" :alt="headData.altName">
感觉没什么问题的运行后，图片没有显示：
和上面对比了一下，图片的路径就不是这个呀，webpack打包后的图片已经不是这个路径了。然后我改成了和上面编译后相似的路径也不行，图片在打包编译的时候已经重新命名了，我也不知道重命名是啥。
所以，就出现了
img没有初始src（打包时就是空的，是后面通过传值过来设置的），图片路径识别的问题。Vue里动态生成的路径无法被url-loader解析到。
二、解决方法
1、通过import的方法将图片源路径引入
这也是我这次重构遇到这个问题用的方法。
通过import的方法将图片源路径引入，这里使用相对路径。（打包编译会形参最终路径）
import headImg from '../../assets/img/sys-head/thrSys.png'
路径直接为引入的此图片（经测试，也可以是数组）。
this.headData.pictureUrl = headImg;
然后子组件可直接根据此值设置图片 src。
<img :src="headData.pictureUrl" :alt="headData.altName">
运行正常：
2、直接将你的图片源文件放在项目目录的 static 文件夹里
原项目用了这种解决方法。（看到了这张图片被放在了 static 文件夹中）
项目中创建 static 文件夹，把图片放入，即可以根据此路径引入。
原来vue-cli2搭建的项目可以使用这种，现在vue-cli3发现他也会把static做打包转化，这种方法使用不了。
<img src="@/../static/img/thrSys.png" :alt="headData.altName">
3、使用require引入图片
this.headData.pictureUrl = require('../../assets/img/sys-head/thrSys.png');
也可以。但是要注意：require后面只能是字符串而不能是变量，所有动态路径无法实现。
网友评论