vue3 动态加载后端图片路径

在 Vue3 中动态加载后端返回的图片路径，通常需要结合 Axios 或其他 HTTP 客户端库来获取数据，并利用 Vue 的响应式特性来更新组件内的图片元素。以下是一个简单的步骤示例：

1. 首先，在你的组件内创建一个变量来保存图片的 URL，例如 `srcUrl`：

<template>
  <img :src="srcUrl" :alt="imageAlt" v-if="srcUrl">
</template>

2. 使用 computed 计算属性处理异步请求：

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const srcUrl = ref('');
const imageAlt = '默认图片描述'; // 这里可以设置默认的 alt 文字

onMounted(async () => {
  try {
    const response = await axios.get('your-backend-api-url');
    srcUrl.value = response.data.imageUrl; // 替换为实际后端返回的图片URL字段
  } catch (error) {
    console.error('Error fetching image:', error);
    srcUrl.value = 'default-image-url'; // 设置默认图片URL，如需要
  }
});
</script>

在这个例子中，当组件挂载后，会发送一个 GET 请求到指定的 API，获取到图片URL后赋值给 `srcUrl`。如果请求失败，会显示默认图片。