问题:

在做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. hdu 5418 题解

    第一眼看到这题,哇,这不是我刚做完的题吗?大水题!然后 这题表面很水,实际上有点坑. 题意 求经过 $ 1 - n $(不能遗漏) 并且回到 $ 1 $ 的最短路. 在看这题之前我们可以来看下这题 最 ...

  2. UVALive-8201-BBP Formula

    8201-BBP Formula Time limit: 3.000 seconds In 1995, Simon Plouffe discovered a special summation sty ...

  3. Python29之字符str与字节bytes

    详解见这位大神:https://www.cnblogs.com/xiaobingqianrui/p/9870480.html 实际上字符串和字节之间的转换过程,就是编码解码的过程,我们必须显示的指定编 ...

  4. Django开发常用方法及面试题

    目录 1.对Django的认识? 2.Django .Flask.Tornado的对比 3.什么是wsgi,uwsgi,uWSGI? 4. django请求的生命周期? 5. 简述什么是FBV和CBV ...

  5. 怎样重启ssh服务

    尝试下面两个命令: service sshd restart systemctl restart sshd.service

  6. RabbitMQ的应用场景

    进入正题. 一.异步处理 场景:发送手机验证码,邮件 传统古老处理方式如下图 这个流程,全部在主线程完成,注册->入库->发送邮件->发送短信,由于都在主线程,所以要等待每一步完成才 ...

  7. beego 框架基本使用 && 知识点整理

    beego 官网的教程已经整理的非常详细了,但作为一个刚接触的学习者,还是有必要做一下整理,这样在后面使用的时候遇到了不太熟悉的地方,还能反过头来看下自己整理的内容,快速的把知识再捞回来,下面是对官网 ...

  8. iOS - Objective-C 关联(objc_setAssociatedObject、objc_getAssociatedObject、objc_removeAssociatedObjects)

    关联是指把两个对象相互关联起来,使得其中的一个对象作为另外一个对象的一部分. 关联特性只有在Mac OS X V10.6以及以后的版本上才是可用的. 在类的定义之外为类增加额外的存储空间 使用关联,我 ...

  9. webpack资源加载常用配置

    const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundl ...

  10. JSONObject和URL以及HttpURLConnection的使用

    1 将java对象类转成json格式 首先引入依赖jar文件 注意依赖文件的版本号,高版本可能没有对应的类 2 我的实体类中包含内部类注意内部类要public才能被序列化成json格式 import ...