vue2 html动态引入图片
时间: 2024-04-08 15:29:26 浏览: 139
vue data引入本地图片的两种方式小结
5星 · 资源好评率100%
在 Vue2 中,可以使用 `v-bind` 指令动态绑定图片的 `src` 属性。也可以使用 `require` 语法来引入图片,例如:
```html
<template>
<div>
<img :src="imgSrc">
</div>
</template>
<script>
export default {
data() {
return {
imgSrc: require('@/assets/images/example.png')
}
}
}
</script>
```
其中 `@` 表示 `src` 目录。如果图片存放在其他目录中,需要修改图片路径。
另外,也可以使用 `computed` 属性来动态计算图片路径,例如:
```html
<template>
<div>
<img :src="imgSrc">
</div>
</template>
<script>
export default {
data() {
return {
imgName: 'example.png',
imgDir: '@/assets/images/'
}
},
computed: {
imgSrc() {
return require(`${this.imgDir}${this.imgName}`)
}
}
}
</script>
```
这样就可以根据需要动态改变图片路径了。
阅读全文