Vue中图片Src使用变量的方法
更新时间：2019年10月30日 08:31:24 作者：果汁凉茶丶
这篇文章主要介绍了Vue中图片Src使用变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
相信不少同学在开发中都有遇到图片路径需要使用变量引入的情况，如定制化背景，动态展示头像等。可能也犯过如下错误
# 错误描述
页面直接调用图片资源的方案
<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')
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue-router如何实现history模式配置，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue实现菜单切换功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
这篇文章主要为大家详细介绍了Vue实现跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了vue3之向echarts组件传值的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue3项目页面实现echarts图表渐变色的动态配置的实现步骤
在开发可配置业务平台时,需要实现让用户对项目内echarts图表的动态配置,让用户脱离代码也能实现简单的图表样式配置,颜色作为图表样式的重要组成部分,其配置方式是项目要解决的重点问题,所以本文介绍了Vue3项目页面实现echarts图表渐变色的动态配置2024-10-10
本篇文章主要介绍了vue中的provide/inject的学习使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
文章介绍了如何在Vue中动态添加和删除元素,通过使用Vue的响应式数据和v-for指令,可以轻松地实现这一功能,文章还详细讲解了如何处理元素的添加和删除事件,以及如何更新视图以反映这些变化2024-12-12
vue任意关系组件通信与跨组件监听状态vue-communication
这篇文章主要介绍了vue任意关系组件通信与跨组件监听状态vue-communication，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
Vue中使用vue-plugin-hiprint插件进行打印的功能实现
hiprint 是一个web 打印的js组件,无需安装软件,支持windows,macOS,linux 系统,支持移动端,PC端浏览器,angular,vue,react 等 分页预览,打印,操作简单,运行快速,本文介绍了Vue中使用vue-plugin-hiprint插件进行打印,需要的朋友可以参考下2025-04-04
Vue3视频播放器组件Vue3-video-play新手入门教程
这篇文章主要给大家介绍了关于Vue3视频播放器组件Vue3-video-play新手入门教程的相关资料,本文实例为大家分享了vue-video-player视频播放器的使用配置,供大家参考,需要的朋友可以参考下2023-12-12
最新评论