问题:

在做Vue项目的时候,由于项目需求,需要动态绑定img的src时,突然发现如果说是直接请求后台接口的图片地址就能显示,

但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候,图片不能显示。

解决方案 1

当在给数据MyimgSrc 设置绝对路径或者是相对路径时应该使用require引入才能成功

   currentSrc : require("@/assets/1.png")

解决方案 2

直接导入

<img :src="url"/>

import url from '../../assets/logo.png'
data {
url,
}

解决方案 3

把图片放到static 文件夹里面 就能直接引入

总结:

当动态绑定img的src的时候,vue数据绑定图片的相对路径或者是绝对路径的时候,需要require路径。

Vue项目中v-bind动态绑定src路径不成功的更多相关文章

  1. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  2. vue项目中打包background背景路径问题

    项目中图片都放在src/img文件夹,img和background-image引用都用相对路径,即../../这种形式 在打包build的设置路径assetsPublicPath: ‘./‘,然后那些 ...

  3. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  4. 去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

  5. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  6. 如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  7. vue项目中遇到的一些问题

    或访问:https://github.com/littleHiuman/experiences-about-vue  欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

  8. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  9. vue项目中设置全局引入scss,使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

随机推荐

  1. Prometheus入门到放弃(2)之Node_export安装部署

    1.下载安装 node_exporter服务需要在三台机器都安装,这里我们以一台机器为例: 地址:https://prometheus.io/download/ ### 另外两个节点部署时,需要先创建 ...

  2. Mybatis笔记4

    mybatis中多对多的步骤 示例:用户和角色,一个用户可以有多个角色,一个角色可以赋予多个用户 步骤: 建立两张表:用户表,角色表,让用户表和角色表具有多对多的关系,需要使用中间表,中间表中包含两张 ...

  3. Linux02 cd命令以及绝对路径和相对路径

    一.cd 这是一个非常基本,也是大家常用的命令,用于切换当前目录,他的参数就是要切换的目录的路径,可以是绝对路径,也可以是相对路径. cd /home/keshengtao/ 绝对路径 cd ./pa ...

  4. 05 多继承、object类

    多继承 Python中一个类可以继承多个父类,并且获得全部父类的属性和方法. class A: def demo(self): print("demo") class B: def ...

  5. SAS学习笔记47 Macro Quoting

    简单来说:Macro Quoting就是将具有特殊功能字符及字母组合的特殊功能隐藏掉.例如:让分号(;)不再表示一个语句的结束,而就是一个普普通通的字符:让GE不再表示大于等于的比较符,而就是两个普普 ...

  6. JMeter-03-元件的作用域与执行顺序

    JMeter元件的作用域与执行顺序 元件的作用域 先来讨论一下元件有作用域.<JMeter基础元件介绍>一节中,我们介绍了8类可被执行的元件(测试计划与线程组不属于元件),这些元件中,取样 ...

  7. IDEA解决 lombok 编译报错 cannot resolve method set/get 方法

    首先关于lombok的介绍 https://blog.csdn.net/ThinkWon/article/details/101392808 总之,就是通过添加注解的方式,不需要为类编写getter或 ...

  8. 【转载】Sqlserver存储过程中使用Select和Set给变量赋值

    Sqlserver存储过程是时常使用到的一个数据库对象,在存储过程中会使用到Declare来定义存储过程变量,定义的存储过程变量可以通过Set或者Select等关键字方法来进行赋值操作,使用Set对存 ...

  9. List转换字典去重问题

    数据源 var list = new List<TestClass> { ,Name="}, ,Name="}, ,Name="}, ,Name=" ...

  10. javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certificatio

    场景:Java调用PHP接口,代码部署在服务器上后,调用报错,显示PHP服务器那边证书我这边服务器不信任(我猜的). 异常信息: 2019-08-06 14:00:09,102 [http-nio-4 ...