动态的src路径怎么写

错误写法

      <div class="icon--wrapper" @click="before">
        <img class="icon-search" :src="leftArrow">
      </div>

    leftArrow (index) {
      if (index <= 0) {
        return './imgs/left_bule@3x.png'
      } else {
        return './imgs/left_bule@3x.png'
      }
    },

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
正确写法
用相对路径是不行的要用绝对路径

      <div class="icon--wrapper" @click="before">
        <img class="icon-search" :src="Number(index) < 0 || Number(index) === 0 ? leftGreyPic : leftBluePic">
      </div>

import leftGreyPic from '@pages/company/customer/imgs/left_grey@3x.png'
import leftBluePic from '@pages/company/customer/imgs/left_blue@3x.png'

在data里面定义

      leftGreyPic: leftGreyPic,
      leftBluePic: leftBluePic,

上面是因为打包后目录全部都变了,根目录不变,vue文件全部变成JavaScript了，保留不了原本的文件目录,你项目运行的时候 你写的相对路径找不到文件了,打包编译的时候没编译动态路径

转载于:https://www.cnblogs.com/antyhouse/p/11230501.html