vue页面动态展示图片

在 Vue 中动态展示图片可以使用 `v-bind` 指令，具体步骤如下：

1. 在 Vue 组件中定义一个变量来存储图片的路径。

data() {
  return {
    imageUrl: ''
  }
}

2. 在 Vue 组件的 template 中使用 `v-bind` 指令来动态绑定 `img` 标签的 `src` 属性到 `imageUrl` 变量上。

<template>
  <div>
    <img v-bind:src="imageUrl" alt="图片">
  </div>
</template>

这里的 `v-bind` 是 Vue 的绑定语法，用来动态绑定 `img` 标签的 `src` 属性到 `imageUrl` 变量上。

3. 如果 `imageUrl` 变量是通过后端接口获取的，那么需要在获取到数据后将 `imageUrl` 变量更新为图片的路径。例如：

mounted() {
  axios.get('/api/image')
    .then(response => {
      this.imageUrl = response.data.imageUrl;
    })
    .catch(error => {
      console.log(error);
    });
}

这里的 `/api/image` 是你的后端接口地址，根据实际情况进行修改。获取到图片路径后，将 `imageUrl` 变量更新为路径即可动态展示图片。