vue中img标签的src属性总结_vue image src-CSDN博客

本文链接：https://blog.csdn.net/weixin_46995731/article/details/109464114

本文介绍Vue中img标签src属性的正确用法，包括静态资源与动态资源的加载方式，以及如何通过不同方法引用本地图片和网络图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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'
	}	
}

先总结到这里,后续遇到新的方法再补充,希望对你有帮助.