不少人在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使用数据绑定不显示的更多相关文章

  1. vue项目在安卓低版本机显示空白原因

    vue项目在安卓低版本机显示空白原因: 可能的原因一: 查看安卓debug,报错,可能有箭头函数语法错误,或者其他语法问题,那可能是ES6语法问题. 这时候需要安装babel-pollyfill. 网 ...

  2. Vue学习之vue属性绑定和双向数据绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue 内联样式的数据绑定

    Vue 内联样式的数据绑定 之前学的是数据绑定 class,现在可以将数据绑定到 style 中. <div id="app"> <div v-bind:styl ...

  4. vue中解决时间在ios上显示NAN的问题

    最近在用vue,遇到倒计时在ios上显示为NAN的问题. 因为做的是倒计时支付,思路是获取服务器时间和下单时间,再转成秒级时间戳做差值. 在网上找到说是ios 不支持例如2018-09-01 10:0 ...

  5. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  6. Vue绑定事件,双向数据绑定,只是循环没那么简单

    v-on对象处理 <p @mouseover = "doTish" @mouseout = "doThat"> 对象形式 </p> &l ...

  7. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  8. v-cloak 实现vue实例未编译完前不显示

    前言: 由于网速原因,(ps:之前同事无意间在网速很差的情况下测出的)在使用vue开发时,会由于vue实例还没编译成功的时候数据绑定的"Mustache"标签会闪现一下,造成不好的 ...

  9. 使用vue 遇到的问题————— 解决手机实时显示项目

    Vue项目文件组织架构: src文件夹存放源代码. Static文件夹存放第三方静态资源.     git将项目上传github  http://blog.csdn.net/laozitianxia/ ...

随机推荐

  1. 上手Typescript,让JavaScript适用于大型应用开发

    Typescript Typescript是一个基于静态类型的,能编译为JavaScript的JavaScript的超集.也就是说任何JavaScript都可以看成是Typescript,IDE能够更 ...

  2. [JZOJ4737] 【NOIP2016提高A组模拟8.25】金色丝线将瞬间一分为二

    Description Input Output Sample Input 5 101 12 23 34 45 5 Sample Output 4 Data Constraint Hint 开long ...

  3. opencv::Brisk检测与匹配

    Brisk(Binary Robust Invariant Scalable Keypoints)特征介绍 构建尺度空间 特征点检测 FAST9-16寻找特征点 特征点定位 关键点描述子

  4. 关于git提交

    16年申请注册的git账号,除了需要找一些有用的demo时会逛一下,其实一直没拿起来真实用过. 好了,说一下今天下午呕心沥血弄出来的东西,其实就是简单的用git小黑窗口推文件夹上去,本人较笨,会按照我 ...

  5. 利用Tampermonkey(油猴)+IDM实现百度云盘大文件下载;

    1.浏览器的脚本选择: 说明:不同的浏览器安装的名称不一样,这里采用Firefox做测试,同样可按照以下列表对应下载: Chrome:Tampermonkey 或 Violent monkey Fir ...

  6. 08 python学习笔记-随机生成大乐透号码(八)

    1 #产生大乐透号码 2 #前区 1-32,5 后区 1-12,2 3 #1.前区从1-32中级取5个,后区再从1-12里面取2个 4 #01 02 03 04 5 def dlt(): #生成随机大 ...

  7. python3.8安装flask出现错误“ModuleNotFoundError: No module named '_ctypes'”

    本想在CentOS下配置flask+nginx+uwsgi环境,结果安装最基础的flask包都出了问题...以下是我的环境: 服务器:阿里云ECS CentOS7 python版本:3.8.0 问题描 ...

  8. Log4j slf4j 配置简单介绍

    Log4j slf4j 配置简单介绍 先借鉴一篇很好的文章 为什么要使用SLF4J而不是Log4J import org.slf4j.Logger; import org.slf4j.LoggerFa ...

  9. unity 初始化数据存储问题

    在用unity进行开发的时初始化的数据和中间实时生成的数据存储不同,初始化文件数据建议安放在asset-StreamingAssets文件下,需要时读取取来.运行时所需的实时文件或数据持久化的xml文 ...

  10. SteamVR Plugin

    使用HTC vive基于unity做虚拟现实,需要用到steamVR插件,最近查找了很多资料,稍微做一下总结. 做虚拟现实无非是头显在场景中的camera功能以及手柄的操作功能. (一)camera以 ...