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中实现嵌套页面(iframe)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家介绍了vue2项目增加eslint配置代码规范示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
图形验证码是一种常见的安全措施,用于防止自动化软件（机器人）滥用网站资源,如自动提交表单,这篇文章主要介绍了在uniapp中实现图形验证码的详细步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-11-11
ElementUI中el-form组件的rules参数举例详解
Form组件提供了表单验证的功能,只需要通过rules属性传入约定的验证规则,并将Form-Item的prop属性设置为需校验的字段名即可,下面这篇文章主要给大家介绍了关于ElementUI中el-form组件的rules参数的相关资料,需要的朋友可以参考下2023-10-10
在Vue3中,可以通过自定义指令来实现v-focus功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2025-05-05
这篇文章主要介绍了vue之this.$router.push页面刷新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了vue中的slot-scope及scope.row用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue项目在线上服务器访问失败原因分析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
ElementUI是一个超棒的UI框架,它基于Vue.js提供了丰富的组件和样式,可以帮你快速构建出美观实用的登陆页面,这篇文章主要介绍了利用Vue3+ElementUI树形菜单实现层次化用户界面的相关资料,需要的朋友可以参考下2026-04-04
在做数据大屏开发的过程中,经常出现需要对列表进行自动滚动的需求,所以本文就来为大家介绍一下如何利用vue封装一个自动循环滚动的列表吧2023-09-09
最新评论