Vue项目中v-bind动态绑定src路径不成功
问题:
在做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路径不成功的更多相关文章
- vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...
- vue项目中打包background背景路径问题
项目中图片都放在src/img文件夹,img和background-image引用都用相对路径,即../../这种形式 在打包build的设置路径assetsPublicPath: ‘./‘,然后那些 ...
- vue 项目中实用的小技巧
# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...
- 去除vue项目中的#及其ie9兼容性
一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...
- 转:如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
- vue项目中使用阿里iconfont图标
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...
- vue项目中设置全局引入scss,使每个组件都可以使用变量
在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...
随机推荐
- [Xamarin] - Xamarin.Forms Project with .Net Standard 2.0
1. Install .NET Core 2.0 SDK .https://www.microsoft.com/net/download/core 2. Install Android 7.1 (AP ...
- Prometheus入门到放弃(2)之Node_export安装部署
1.下载安装 node_exporter服务需要在三台机器都安装,这里我们以一台机器为例: 地址:https://prometheus.io/download/ ### 另外两个节点部署时,需要先创建 ...
- C++中数组占用的内存计算
在C++中int类型每个空间是4个字节,long long int 是8个字节,而bool类型是1个字节 所以一般能用bool就别用int,节约空间 数组占用内存的计算 a[1001][1001]的空 ...
- Python复习笔记01
(1)计算机常识 计算机:硬件(运算器,控制器,存储器,输入设备,输出设备)软件 (系统软件, 应用软件) 二进制 整数存储 文件单 位换算 1Byte = 8bit 1KB = 1024Byte 1 ...
- 在论坛中出现的比较难的sql问题:10(删除多表中的同一个外键)
原文:在论坛中出现的比较难的sql问题:10(删除多表中的同一个外键) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得有 ...
- ABP 基于DDD的.NET开发框架 学习(二)创建实体
1.创建模型类打开.Core项目,新建新建一个项目文件夹(Demo);为了演示表关联及外键的使用,创建两个类:创建类ClothesCategoty.csusing Abp.Domain.Entitie ...
- Docker 镜像 && 容器的基本操作
镜像 && 容器 docker 镜像好比操作系统的镜像(iso) docker 容器好比是已安装运行的操作系统 所以说 docker 镜像文件运行起来之后,就是我们所说的 docker ...
- python 内置函数和匿名函数
内置函数 截止到python版本3.6.2,现在python一共为我们提供了68个内置函数. Built-in Functions abs() dict() help() min() ...
- Windows下编译 Hadoop
Windows下编译 Hadoop-2.9.2 系统环境 系统: Windows 10 10.0_x64 maven: Apache Maven 3.6.0 jdk: jdk_1.8.0_201 Pr ...
- 【转载】网站配置Https证书系列(三):IIS网站设置Http链接直接跳转Https安全连接
Http链接请求是以明文的方式传输,在传输的过程中很容易被篡改数据,一个典型的例子就是运营商的网络劫持注入广告信息等,而Https请求则是安全加密的请求,报文数据以密文的形式进行传输.当IIS网站配置 ...