问题:

在做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. 通俗理解TCP的三次握手

    三次握手流程的本质,可以这么理解:TCP的三次握手其实是双方各一次握手,各一次确认,只是其中一次握手和确认合并在一起. 当然也可以更通俗的去理解: "喂,你听得到吗?" " ...

  2. WUSTOJ 1324: Base64 Coding(Java)未解决,求题解

    题目链接:1324: Base64 Coding 资料:ASCII码表 原文是英文,而且篇幅较长.因此下面不粘贴原文,只写中文大意. Description Base64是一种编码算法.它的工作原理是 ...

  3. CH01-ZYNQ修炼秘籍-LINUX篇-虚拟机环境搭建

    CH01基于Ubuntu系统的ZYNQ-7000开发环境的搭建 1.1概述 实验环境: Windows 10 专业版 Vmware workstation 14.1.1 Ubuntu 16.04.3 ...

  4. Oracle随笔之用拆分后的列数据关联表查询

    -----------------------建表------------------------- create table test(id int, plist varchar2(30)) ; c ...

  5. JPA 一对一 一对多 多对一 多对多配置

    1 JPA概述 1.1 JPA是什么 JPA (Java Persistence API) Java持久化API.是一套Sun公司 Java官方制定的ORM 方案,是规范,是标准 ,sun公司自己并没 ...

  6. SringMVC笔记

    SpringMvc主要是三个Servlet:HttpServletBean,FramwworkServlet,DispatcherServlet,它们是依次继承的关系,其处理过程大致功能如下: 1.H ...

  7. github新建远程仓库初始化记录

    …or create a new repository on the command line echo "# 输出内容" >> README.md git init ...

  8. SEO基础知识

    SEO: SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”!SEO是指通过对网站进行站内优化和修复(网站Web结构调整.网站内容建设.网站代码优 ...

  9. $.ajaxSetup()与$.ajax()区别

    ajaxSetup()其使用方法与ajax()并无区别,只是在其之后的ajax()不用再重复添加相同参数,节省了代码量. 附:API中关于jQuery.ajaxSetup([options])的描述和 ...

  10. python 循环结构(for-in)

    循环结构(for-in) 说明:也是循环结构的一种,经常用于遍历字符串.列表,元组,字典等 格式: for x in y: 循环体 执行流程:x依次表示y中的一个元素,遍历完所有元素循环结束 示例1: ...