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') } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserve
这篇文章主要介绍了vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-03-03element-ui tree 手动展开功能实现(异步树也可以)
这篇文章主要介绍了element-ui tree 手动进行展开(异步树也可以),项目中用到了vue的element-ui框架,用到了el-tree组件,需要的朋友可以参考下2022-08-08Vue3之Mixin的使用方式(全局,局部,setup内部使用)
这篇文章主要介绍了Vue3之Mixin的使用方式(全局,局部,setup内部使用),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10Vue配置proxy代理接口报错2007 bad domain的解决
本文主要介绍了Vue配置proxy代理接口报错2007 bad domain的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-06-06vue+Ant Design进度条滑块与input联动效果实现
最近接到这样一个需求滑块进度与输入框为一致,默认值为80,最小不能小于30,最大为100,怎么实现这个联动效果呢,下面小编给大家分享下基于vue+Ant Design进度条滑块与input联动效果的实现,感兴趣的朋友跟随小编一起看看吧2022-12-12
最新评论