Vue中图片Src使用变量的案例分析

　　介绍

小编给大家分享一下Vue中图片Src使用变量的案例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

Vue的优点

Vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。

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

<强> #错误描述

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

& lt; img  Src=https://www.yisu.com/zixun/static/images/web_bg.png "/>

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

& lt; template> 　　,& lt; img  https://www.yisu.com/zixun/: src=" imgSrc "/> 　　

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

<强> #解决办法

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

数据(),{ 　　,return  { 　　imgSrc才能:& # 39;https://cache.yisu.com/upload/information/20200622/114/11961.jpg& # 39; 　　,} 　　}

2。使用进口导入本地资源

import  imgSrc 得到& # 39;. ./. ./图片/web_bg.png& # 39; 　　export  default  { 　　,数据(){ 　　return {才能 　　,,imgSrc: imgSrc 　　,,} 　　,} 　　}

3。使用需要导入

数据(),{ 　　,return  { 　　imgSrc才能:,要求(& # 39;. ./. ./图片/web_bg.png& # 39;) 　　,} 　　}

以上是“Vue中图片Src使用变量的案例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

Vue中图片Src使用变量的案例分析