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>这种方法图片不显示
时间: 2024-04-06 18:34:01 浏览: 170
这个代码片段中,获取到的图片地址是一个相对地址,需要保证该地址正确,同时需要在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地址。
阅读全文