怎样动态的传入img标签的src属性
时间: 2024-03-30 15:40:31 浏览: 55
在Vue3中,可以使用`:src`指令来动态绑定`img`标签的`src`属性。例如:
```html
<template>
<div>
<img :src="imageUrl" alt="图片">
<button @click="changeImage">换一张图片</button>
</div>
</template>
```
```javascript
import { ref } from 'vue';
export default {
setup() {
const imageUrl = ref('https://via.placeholder.com/150');
function changeImage() {
imageUrl.value = 'https://via.placeholder.com/200';
}
return {
imageUrl,
changeImage
};
}
};
```
在上面的例子中,我们在模板中使用`:src="imageUrl"`来动态绑定`img`标签的`src`属性,然后在组件的`setup`函数中,使用`ref`函数创建一个响应式引用`imageUrl`,并在`changeImage`函数中修改`imageUrl`的值来动态改变图片的地址。当点击按钮时,`imageUrl`的值被修改为`https://via.placeholder.com/200`,`img`标签的`src`属性也会相应地改变,显示一张不同的图片。
阅读全文