Vue中图片Src使用变量的方法


Posted in Javascript onOctober 30, 2019

相信不少同学在开发中都有遇到图片路径需要使用变量引入的情况,如定制化背景,动态展示头像等。可能也犯过如下错误

# 错误描述

页面直接调用图片资源的方案

<img src="../../static/images/web_bg.png" />

改写成变量形式,于是如下编写

<template>
 <img :src="imgSrc" />
</template>

<script>
export default {
 data() {
  return {
   imgSrc: '../../images/web_bg.png'
  }
 }
}
</script>

结果运行图片加载失败。什么原因?原来是因为在打包时会被自动加上hash值从而引用失败,产生差异

# 解决办法

1. 使用 网络上的图片资源

data() {
 return {
  imgSrc: 'http://easy-stage.longhu.net/files/images/7f458e55f6954078aa8e8efb2c45cc40.jpg'
 }
}

2. 使用import导入本地资源

import imgSrc from '../../images/web_bg.png'
export default {
 data() {
  return {
   imgSrc: imgSrc
  }
 }
}

3. 使用 require 导入

data() {
 return {
  imgSrc: require('../../images/web_bg.png')
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
vue-quill-editor实现图片上传功能
Aug 08 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
解决VUE双向绑定失效的问题
Oct 29 #Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 #Javascript
vue获取form表单的值示例
Oct 29 #Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 #Javascript
使用axios请求时,发送formData请求的示例
Oct 29 #Javascript
基于form-data请求格式详解
Oct 29 #Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 #Javascript
You might like
PHP实现网站访问量计数器
2017/10/27 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
用Python实现换行符转换的脚本的教程
2015/04/16 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
局部内部类是否可以访问非final变量?
2013/04/20 面试题
办公室前台的岗位职责
2013/12/20 职场文书
学校十一活动方案
2014/02/01 职场文书
一年级数学教学反思
2014/02/01 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
北京颐和园导游词
2015/01/30 职场文书
新教师教学工作总结
2015/08/14 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技