动态的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了,保留不了原本的文件目录,你项目运行的时候 你写的相对路径找不到文件了,打包编译的时候没编译动态路径
动态的src路径怎么写的更多相关文章
- winform展示Unity3D文件(支持动态改变文件路径)
winform下展示Unity3D文件可以支持对Unity3D实现的模块进行包装,以及在其他的项目中需要展示Unity3D的界面时候,恰到适宜地进行打开展示,这里我展示如何使用winform打开Uni ...
- Linux下动态库查找路径的问题
说到和动态库查找路径相关的问题,总体上可以分为两类: 第一类: 通过源代码编译程序时出现的找不到某个依赖包的问题,而如果此时你恰好已经按照它的要求确确实实.千真万确.天地良心地把依赖库给装好了, ...
- 谈谈Linux下动态库查找路径的问题 ldconfig LD_LIBRARY_PATH PKG_CONFIG_PATH
谈谈Linux下动态库查找路径的问题 ldconfig LD_LIBRARY_PATH PKG_CONFIG_PATH 转载自:http://blog.chinaunix.net/xmlrpc.ph ...
- 谈谈Linux下动态库查找路径的问题
学习到了一个阶段之后,就需要不断的总结.沉淀.清零,然后才能继续"上路".回想起自己当年刚接触Linux时,不管是用源码包编译程序,还是程序运行时出现的和动态库的各种恩恩怨怨,心里 ...
- Linux 静态库与动态库搜索路径设置详解【转】
原文地址:http://blog.chinaunix.net/uid-29025972-id-3855495.html 1. 连接和运行时库文件搜索路径的设置 库文件在连接(静态库和共享库)和运行(仅 ...
- Linux 静态库与动态库搜索路径设置详解
转载:http://blog.chinaunix.net/uid-29025972-id-3855495.html 1. 连接和运行时库文件搜索路径的设置 库文件在连接(静态库和共享库)和运行(仅限于 ...
- [转]谈谈Linux下动态库查找路径的问题
http://blog.chinaunix.net/uid-23069658-id-4028681.html 学习到了一个阶段之后,就需要不断的总结.沉淀.清零,然后才能继续“上路”.回想起自己当年刚 ...
- 关于React的require添加动态变化的路径
关于React的require添加动态变化的路径 直接这样写显然是不会有错误的 let path = require('../images/girl.png'); 但是如果你尝试着 var gg = ...
- 转:谈谈Linux下动态库查找路径的问题
http://blog.chinaunix.net/uid-23069658-id-4028681.html 学习到了一个阶段之后,就需要不断的总结.沉淀.清零,然后才能继续“上路”.回想起自己当年刚 ...
随机推荐
- [sonarqube的使用] sonarlint在idea&eclipse中安装与使用
介绍 代码质量管理的开源平台,用于管理源代码的质量 通过插件形式,可以支持包括java,C#,C/C++,PL/SQL,Cobol,JavaScrip,Groovy等等二十几种编程语言的代码质量管 ...
- sentry之二:sentry配置钉钉和email
springboot+springcloud后台项目配置日志采集 gradle: compile 'com.getsentry.raven:raven-logback:8.0.2' compile ' ...
- 修改Linux桌面高分屏下QT程序界面的缩放
问题 Linux下的高分屏在Gnome.KDE中有缩放因子一说,但是对QT程序(常用如 WPS.网易云音乐等)无效,这里只是简记修改QT程序的缩放方法 解决 su #切换root用户 cp /etc/ ...
- 创建Maven项目时,GroupId和Artifact Id该怎么填写呢?
1.什么是groupid和artifactId? groupid和artifactId被统称为“坐标”是为了保证项目唯一性而提出的,如果你要把你项目弄到maven本地仓库去,你想要找到你的项目就必须根 ...
- MVC+Ninject+三层架构+代码生成 -- 总结(六、邏輯層)
1.邏輯層的方法應該與數據層的方法一一對應.邏輯層返回的結果都是用接口IResult封裝,用於項目轉換時,能減少變化的代碼量. 2.邏輯層都需要繼承 BaseLogic 類 public class ...
- 在ASP.NET Web API 2中使用Owin OAuth 刷新令牌(示例代码)
在上篇文章介绍了Web Api中使用令牌进行授权的后端实现方法,基于WebApi2和OWIN OAuth实现了获取access token,使用token访问需授权的资源信息.本文将介绍在Web Ap ...
- 我是如何一步步编码完成万仓网ERP系统的(九)产品库设计 5.产品属性项
https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...
- 基于vue+springboot+docker网站搭建【五】部署vue前端项目
部署vue前端项目 一.下载项目到本地 https://github.com/macrozheng/mall-admin-web 二.npm install 三.修改api配置,改为你接下来要部 ...
- java--修饰符与常用规则
修饰符总结 修饰符 类 成员变量 成员方法 构造方法 public Y Y Y Y default Y Y Y Y protected Y Y Y private Y Y Y abstract Y Y ...
- Kubernetes概念之deployment
一整天一整天的坐在办公室,真的很~~~,懵圈中....,求解救. 本文通过<Kubernetes权威指南>的概念部分学习总结 Deployment作用 Deployment与RC的作用其实 ...