Vue中图片Src使用变量的方法
2019-12-02 18:11
2631 查看
相信不少同学在开发中都有遇到图片路径需要使用变量引入的情况,如定制化背景,动态展示头像等。可能也犯过如下错误
# 错误描述
页面直接调用图片资源的方案
<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') } }
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- 不使用setAttribute()方法改变某个图片的src属性
- vue用变量代替图片src路径解决方案
- Vue.js 使用v-cloak后仍显示变量的解决方法
- 使用VUE+iView+.Net Core上传图片的方法示例
- 图片的src使用方法
- VUE——全局变量模块或全局方法挂载到Vue.prototype里使用
- 关于Vue.js 使用v-cloak后仍显示变量的解决方法
- vue项目使用.env文件配置全局环境变量的方法
- vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法
- php使用ob_start()实现图片存入变量的方法
- Vue项目使用swiper做轮播图时,异步调用数据时导致图片不能滑动的解决方法
- 关于Vue.js 使用v-cloak后仍显示变量的解决方法
- vue 使用html2canvas将DOM转化为图片的方法
- vue使用prerender-spa-plugin预渲染插件图片多导致build打包后页面异常大的解决方法
- vue中使用axios post上传头像/图片并实时显示到页面的方法
- vue中通过定义的数组循环将img的src引入图片却不显示图片问题解决方法
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- php使用ob_start()实现图片存入变量的方法
- 基于vue 动态加载图片src的解决方法
- 使用Java反射机制实现访问类中的私有变量或者方法