vue中img标签的src属性总结(问题解决)
更新时间：2023年11月16日 16:02:53 作者：小锅盖快跑
初步接触vue框架时,好多朋友使用img标签时,设置动态src属性时,可能都会遇到路径不生效的问题,本文给大家介绍vue中img标签的src属性总结,感兴趣的朋友一起看看吧
vue中img标签的src属性的使用
初步接触vue框架时,好多朋友使用img标签时,设置动态src属性时,可能都会遇到路径不生效的问题,咱们废话不多说,开整!!!
img标签引用资源图片
一般不需要webpack处理的资源放在static,需要经过处理的放在assets
1.不需要webpack处理的图片放在static
不需要webpack处理的图片,直接使用绝对路径调用图片,如"/static/xx/xxx.png"
栗子
html代码
<img v-bind:src="imgUrl"/>
js代码
data(){
return{
imgUrl:"/static/logo.png"
}
}成功读取到了logo.png. 执行npm run build后查看dist文件，发现logo.png原封不动地放在了根目录下。
2.需要webpack处理的图片放在assets
可以使用import还是require进行引入.import为es6语法,require为commonJS形式.
栗子1
<img class="logo-img" src="@/assets/images/logo.png" alt="logo" />
栗子2
<img :src="require('@/assets/images/sidederLogo.png')" class="sidebar-logo">栗子3
//HTML1
<img class="logo-img" :src="imgUrl" alt="logo" />
//JS
data(){
return{
imgUrl:require('./assets/logo.png')
}
}也可以直接引用网络路径
//HTML1
<img class="logo-img" :src="imgUrl" alt="logo" />
//JS
data(){
return{
imgUrl: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
}
}先总结到这里,后续遇到新的方法再补充,希望对你有帮助.
到此这篇关于vue中img标签的src属性总结的文章就介绍到这了,更多相关vue src属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue实现记住账号密码功能,用户登录时若勾选“记住我”功能选项，则将登录名和密码（加密后）存入本地缓存，下次登录页面加载时自动获取保存好的账号和密码（需解密），回显到登录输入框中，下面分享我实现的具体步骤，需要的朋友可以参考下2022-07-07
vue3 HighCharts自定义封装之径向条形图的实战过程
highcharts是国外知名基于javascript的图表库,下面这篇文章主要给大家介绍了关于vue3 HighCharts自定义封装之径向条形图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue+elementUI 实现内容区域高度自适应的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-09-09
详解Vue项目在其他电脑npm run dev运行报错的解决方法
这篇文章主要介绍了详解Vue项目在其他电脑npm run dev运行报错的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要介绍了vue2 中二级路由 高亮问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
本篇文章主要介绍了Vue调试神器vue-devtools安装方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
vue3组合式API中setup()概念和reactive()函数的用法
这篇文章主要介绍了vue3组合式API中setup()概念和reactive()函数的用法,接下来的事件，我将带着你从浅到深分析为什么我们需要学习组合式API以及我们的setup()函数作为入口函数的一个基本的使用方式，需要的朋友可以参考下2023-03-03
大家都知道使用 Openlayers可以很灵活自由的做出各种地图和空间数据的展示。而且这个框架是完全免费和开源的，本文记录下 Vue 使用 OpenLayers 入门，使用 OpenLayers 创建地图组件的相关知识，需要的朋友一起学习下吧2021-09-09
今天小编就为大家分享一篇Vue文件配置全局变量的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本文主要介绍了记一次Vue中$route序列号报错，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
最新评论