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之input输入框防抖debounce函数的使用方式
这篇文章主要介绍了vue之input输入框防抖debounce函数的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
Vuejs第七篇之Vuejs过渡动画案例全面解析
这篇文章主要介绍了Vuejs第七篇之Vuejs过渡动画案例全面解析的相关资料,需要的朋友可以参考下
2016-09-09
vue 顶部消息横向滚动通知效果实现
系统顶部展示一个横向滚动的消息通知,就是消息内容从右往左一直滚动,这篇文章主要介绍了vue顶部消息横向滚动通知,需要的朋友可以参考下
2024-02-02
Vue2 监听属性改变watch的实例代码
今天小编就为大家分享一篇Vue2 监听属性改变watch的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
vue如何给组件动态绑定不同的事件
这篇文章主要介绍了vue如何给组件动态绑定不同的事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue中的rules表单校验规则使用方法示例详解 :rules=“rules“
这篇文章主要介绍了vue中的rules表单校验规则使用方法示例详解 :rules=“rules“,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-11-11
VUE-cli3使用 svg-sprite-loader
svg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，这篇文章主要介绍了VUE-cli3使用 svg-sprite-loader,需要的朋友可以参考下
2018-10-10
vue学习笔记之slot插槽基本用法实例分析
这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结合实例形式分析了vue slot插槽基本使用方法与操作注意事项,需要的朋友可以参考下
2020-02-02
elementUI组件el-dropdown(踩坑)
本文主要介绍了elementUI组件el-dropdown的一些坑，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-12-12
超全面的vue.js使用总结
Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。下面这篇文章主要给大家介绍了关于vue.js使用的相关总结,需要的朋友可以参考借鉴。
2017-02-02