template> <div> <img :src="imageSrc" /> </div> </template> <script> export default { data() { return { imageSrc: '', }; }, async created() { const response = await axios.get('your-api-url'); const url = response.data.url; // 假设获取到的数据格式为 { url: 'example.jpg' } this.imageSrc = http://localhost:8081/img/AllCommodity/${url}; }, }; </script>这种方法图片不显示

这个代码片段中，获取到的图片地址是一个相对地址，需要保证该地址正确，同时需要在img标签中添加一个alt属性，以防图片加载失败时能够显示替代文本。另外，如果你的静态资源服务不是运行在localhost:8081这个地址上，需要替换掉`http://localhost:8081/img/AllCommodity/${url}`中的主机名和端口号部分。以下是一个修改后的示例代码：

<template>
  <div>
    <img :src="imageSrc" alt="example image" />
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      imageSrc: '',
    };
  },
  async created() {
    try {
      const response = await axios.get('your-api-url');
      const url = response.data.url;
      // 假设获取到的数据格式为 { url: 'example.jpg' }
      this.imageSrc = `/img/AllCommodity/${url}`;
    } catch (error) {
      console.error(error);
    }
  },
};
</script>

在这个示例中，我们使用了相对路径来指定图片地址，并且在获取图片地址的过程中添加了try-catch语句，以便捕获错误并进行处理。如果你的图片地址是一个绝对路径，需要使用完整的URL地址。