Vue项目中img标签src的路径问题

2019-05-24  本文已影响0人  小丘啦啦啦

一、问题引入

 <img src="../../assets/img/sys-head/thrSys.png">

像这种直接写死的没有出现什么问题。
但肯定是要改为父组件传值url过来属性绑定来设置的(毕竟是个组件,写死这组件的复用性就太差了)。此时看了一下运行项目后此图片的路径。



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


<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后面只能是字符串而不能是变量,所有动态路径无法实现。

上一篇 下一篇

猜你喜欢

热点阅读