vue 动态设置img的src路径
时间: 2023-07-01 15:27:38 浏览: 831
详解vue-cil和webpack中本地静态图片的路径问题解决方案
可以使用 Vue 的绑定语法来动态设置 `img` 标签的 `src` 属性。例如:
```html
<template>
<div>
<img :src="imageUrl" alt="Image">
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: 'https://example.com/image.jpg'
}
},
methods: {
changeImage() {
this.imageUrl = 'https://example.com/another-image.jpg'
}
}
}
</script>
```
在上面的示例中,我们使用了 `:src` 绑定语法来将 `imageUrl` 数据属性与 `img` 标签的 `src` 属性绑定在一起。当 `imageUrl` 的值发生变化时,`img` 标签的 `src` 属性也会被相应地更新。
阅读全文