vue 设置img标签src值
时间: 2023-06-27 08:03:51 浏览: 194
vue动态设置img的src路径实例
在 Vue 中设置 `img` 标签的 `src` 值,可以使用以下两种方式:
1. 直接使用绑定语法 `v-bind` 或简写符号 `:`,将图片的路径绑定到 `src` 属性上,如下所示:
```html
<template>
<div>
<img :src="imgUrl">
</div>
</template>
<script>
export default {
data() {
return {
imgUrl: 'path/to/image.png'
}
}
}
</script>
```
2. 使用插值语法 `{{}}`,将图片的路径直接嵌入到 `src` 属性中,如下所示:
```html
<template>
<div>
<img src="{{imgUrl}}">
</div>
</template>
<script>
export default {
data() {
return {
imgUrl: 'path/to/image.png'
}
}
}
</script>
```
推荐使用第一种方式,因为它更加简洁明了,而且可以直接通过动态绑定改变图片路径。
阅读全文