错误写法

      <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了,保留不了原本的文件目录,你项目运行的时候 你写的相对路径找不到文件了,打包编译的时候没编译动态路径

动态的src路径怎么写的更多相关文章

  1. winform展示Unity3D文件(支持动态改变文件路径)

    winform下展示Unity3D文件可以支持对Unity3D实现的模块进行包装,以及在其他的项目中需要展示Unity3D的界面时候,恰到适宜地进行打开展示,这里我展示如何使用winform打开Uni ...

  2. Linux下动态库查找路径的问题

    说到和动态库查找路径相关的问题,总体上可以分为两类:    第一类: 通过源代码编译程序时出现的找不到某个依赖包的问题,而如果此时你恰好已经按照它的要求确确实实.千真万确.天地良心地把依赖库给装好了, ...

  3. 谈谈Linux下动态库查找路径的问题 ldconfig LD_LIBRARY_PATH PKG_CONFIG_PATH

    谈谈Linux下动态库查找路径的问题 ldconfig LD_LIBRARY_PATH  PKG_CONFIG_PATH 转载自:http://blog.chinaunix.net/xmlrpc.ph ...

  4. 谈谈Linux下动态库查找路径的问题

    学习到了一个阶段之后,就需要不断的总结.沉淀.清零,然后才能继续"上路".回想起自己当年刚接触Linux时,不管是用源码包编译程序,还是程序运行时出现的和动态库的各种恩恩怨怨,心里 ...

  5. Linux 静态库与动态库搜索路径设置详解【转】

    原文地址:http://blog.chinaunix.net/uid-29025972-id-3855495.html 1. 连接和运行时库文件搜索路径的设置 库文件在连接(静态库和共享库)和运行(仅 ...

  6. Linux 静态库与动态库搜索路径设置详解

    转载:http://blog.chinaunix.net/uid-29025972-id-3855495.html 1. 连接和运行时库文件搜索路径的设置 库文件在连接(静态库和共享库)和运行(仅限于 ...

  7. [转]谈谈Linux下动态库查找路径的问题

    http://blog.chinaunix.net/uid-23069658-id-4028681.html 学习到了一个阶段之后,就需要不断的总结.沉淀.清零,然后才能继续“上路”.回想起自己当年刚 ...

  8. 关于React的require添加动态变化的路径

    关于React的require添加动态变化的路径 直接这样写显然是不会有错误的 let path = require('../images/girl.png'); 但是如果你尝试着 var gg = ...

  9. 转:谈谈Linux下动态库查找路径的问题

    http://blog.chinaunix.net/uid-23069658-id-4028681.html 学习到了一个阶段之后,就需要不断的总结.沉淀.清零,然后才能继续“上路”.回想起自己当年刚 ...

随机推荐

  1. Rabbit MQ 学习参考

    网上的教程虽然多,但是提供demo的比较少,或者没有详细的说明,因此,本人就照着网上的教程做了几个demo,并把代码托管在码云,供有需要的参考. 项目地址:https://gitee.com/dhcl ...

  2. freemarker模板文件的4个组成部分

    FreeMarker模板文件主要由以下4个部分组成:1.文本,直接输出的部分.2.注释,即<#–…–>格式不会输出.3.插值(Interpolation):即${..}或者#{..}格式的 ...

  3. WPF布局原则

    WPF系统使用基于流布局的布局标准,开发人员创建与显示分辨率和窗口大小无关的用户界面.在不同显示器上可以进行很好的缩放. 首先来谈一谈布局原则: WPF窗口只能包含一个元素(Window元素属于内容控 ...

  4. 3-awk

    1.输出双引号:awk '{print "\""}'        #放大:awk '{print "  \"  "}'使用“”双引号把一个 ...

  5. js 数组去重总结

    es6 set ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. let arr = [1,2,3,4,3,2,3,4,6,7,6]; let unique = ...

  6. python机器学习简介

    目录 一:学习机器学习原因和能够解决的问题 二:为什么选择python作为机器学习的语言 三:机器学习常用库简介 四:机器学习流程   机器学习是一门多领域交叉学科,涉及概率论.统计学.逼近论.凸分析 ...

  7. Flask中request与response参数

    目录 request response request from flask import Flask from flask import request app = Flask(__name__) ...

  8. shell脚本初学者笔记

    概述 Shell 是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操作系统内核的服务. Shell 脚本(shell script),是一种为 shell 编写的脚本程序. Linu ...

  9. i春秋——“百度杯”CTF比赛 九月场——Test(海洋cms / seacms 任意代码执行漏洞)

    打开发现是海洋cms,那就搜索相关漏洞 找到一篇介绍海洋cms的命令执行漏洞的文章:https://www.jianshu.com/p/ebf156afda49 直接利用其中给出的poc /searc ...

  10. Git的下载安装

    下载地址:https://git-scm.com/download/win 命令: git add ...  ---将资源放到缓存区域 git commit  -m "提交说明"  ...