Vue img的src使用数据绑定不显示
不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败。
<img src="{{ imgUrl }}"/>
原因:写法错误
解决:应该使用v-bind
<img :src="imgUrl"/>
但是有时这种写法图片也加载不出来
原因:因为你的imgUrl使用了本地图片的路径。
解决方案1:将图片放在src下的static文件夹内
原理:用build打包后的dist文件夹下,文件的位置发生了变动,但是static文件夹原封不动,即static文件夹为服务器暴露出的静态资源目录
解决方案2:直接传入图片编码
imgUrl = require('./assets/logo.png')
这样可以读到项目路径下的图片,但是要注意,因为CommonJS只允许使用字符串字面量,所以这种方法的灵活性依旧很差,所以还是推荐将静态文件放入static文件夹下。
Vue img的src使用数据绑定不显示的更多相关文章
- vue项目在安卓低版本机显示空白原因
vue项目在安卓低版本机显示空白原因: 可能的原因一: 查看安卓debug,报错,可能有箭头函数语法错误,或者其他语法问题,那可能是ES6语法问题. 这时候需要安装babel-pollyfill. 网 ...
- Vue学习之vue属性绑定和双向数据绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 内联样式的数据绑定
Vue 内联样式的数据绑定 之前学的是数据绑定 class,现在可以将数据绑定到 style 中. <div id="app"> <div v-bind:styl ...
- vue中解决时间在ios上显示NAN的问题
最近在用vue,遇到倒计时在ios上显示为NAN的问题. 因为做的是倒计时支付,思路是获取服务器时间和下单时间,再转成秒级时间戳做差值. 在网上找到说是ios 不支持例如2018-09-01 10:0 ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- Vue绑定事件,双向数据绑定,只是循环没那么简单
v-on对象处理 <p @mouseover = "doTish" @mouseout = "doThat"> 对象形式 </p> &l ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- v-cloak 实现vue实例未编译完前不显示
前言: 由于网速原因,(ps:之前同事无意间在网速很差的情况下测出的)在使用vue开发时,会由于vue实例还没编译成功的时候数据绑定的"Mustache"标签会闪现一下,造成不好的 ...
- 使用vue 遇到的问题————— 解决手机实时显示项目
Vue项目文件组织架构: src文件夹存放源代码. Static文件夹存放第三方静态资源. git将项目上传github http://blog.csdn.net/laozitianxia/ ...
随机推荐
- Python_散点图与折线图绘制
在数据分析的过程中,经常需要将数据可视化,目前常使用的:散点图 折线图 需要import的外部包 一个是绘图 一个是字体导入 import matplotlib.pyplot as plt fro ...
- [BZOJ2392][HAOI2011]Problem c
Description 给n个人安排座位,先给每个人一个1~n的编号,设第i个人的编号为ai(不同人的编号可以相同),接着从第一个人开始,大家依次入座,第i个人来了以后尝试坐到ai,如果ai被占据了, ...
- mongodb学习笔记系列一
一.简介和安装 ./bin/mongod --dbpath /path/to/database --logpath /path/to/log --fork --port 27017 mongodb非常 ...
- redis之管道
Redis 的消息交互当我们使用客户端对 Redis 进行一次操作时,如下图所示,客户端将请求传送给服务器,服务器处理完毕后,再将响应回复给客户端.这要花费一个网络数据包来回的时间. 如果连续执行多条 ...
- scrollWidth、clientWidth 和 offsetWidth
scrollWidth:对象的实际内容宽度,不包括边线宽度,会随对象中内容超过可视区而变大. clientWidth:对象内容的可视区的宽度,不包括边线宽度,会随对象显示大小的变化而变化. offse ...
- unity 初始化数据存储问题
在用unity进行开发的时初始化的数据和中间实时生成的数据存储不同,初始化文件数据建议安放在asset-StreamingAssets文件下,需要时读取取来.运行时所需的实时文件或数据持久化的xml文 ...
- Chrome插件开发(二)
作为一个前端开发者,我们经常需要和各种各样的接口打交道,很多时候我们的开发环境的域和接口所在的域是不同的,比如我们本地开发环境运行域是localhost,但接口所在的域是www.xx.com,这个时候 ...
- 如何用好redis pipeline
编者注:pipeline是Redis的一个提高吞吐量的机制,适用于多key读写场景,比如同时读取多个key的value,或者更新多个key的value.工作过程中发现挺多小伙伴都对pipeline多少 ...
- 【MySQL】MySQL忘记密码或修改密码的方法
MySQL修改新密码方法 记得原密码情况下,修改新密码:登录到数据库后,输入 set password for 用户名@localhost = '新密码'; 来设置新的密码,别忘记分号哦.如图所示: ...
- 5、pytest -- 猴子补丁
目录 1. 修改函数功能或者类属性 2. 修改环境变量 3. 修改字典 有时候,测试用例需要调用某些依赖于全局配置的功能,或者这些功能本身又调用了某些不容易测试的代码(例如:网络接入).fixture ...