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 相关文章推荐
javascript 三种编解码方式
Feb 01 Javascript
JavaScript 的继承
Oct 01 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
js如何取消事件冒泡
Sep 23 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
解决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 批量生成html,txt文件的实现代码
2013/06/26 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
vue实现信息管理系统
2020/05/30 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
python实现windows下文件备份脚本
2018/05/27 Python
简单了解Python3里的一些新特性
2019/07/13 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
python retrying模块的使用方法详解
2019/09/25 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
详解python内置模块urllib
2020/09/09 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
应届行政管理专业个人自我评价
2013/12/28 职场文书
公司踏青活动方案
2014/08/16 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
停车位租赁协议书
2014/09/24 职场文书
财务稽核岗位职责
2015/04/13 职场文书
小学安全教育主题班会
2015/08/12 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android