好资源导航 » 文章资讯 » Vue中图片Src使用变量的方法

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

2023-08-10 04:33:04 64

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

#错误描述

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

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

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

#解决办法

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

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

2.使用import导入本地资源

importhttp://www.haoziyuan.ccimgSrcfrom'../../images/web_bg.png'
exportdefault{
data(){
return{
http://www.haoziyuan.ccimgSrc:http://www.haoziyuan.ccimgSrc
}
}
}

3.使用require导入

data(){
return{
http://www.haoziyuan.ccimgSrc:require('../../images/web_bg.png')
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐