vue通过链接显示服务器上的图片_#Chrome扩展# 超强网页图片嗅探批量下载图片助手...
时间: 2023-06-19 08:06:04 浏览: 97
要在Vue中显示来自服务器的图片,您可以使用`<img>`标记并将其`src`属性设置为图片的URL。例如:
```html
<template>
<div>
<img :src="imageUrl" alt="My Image">
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: 'https://example.com/my-image.jpg'
}
}
}
</script>
```
在这个示例中,我们将图片的URL设置为组件的数据属性`imageUrl`。然后,我们将`<img>`标记的`src`属性绑定到该属性,以便Vue可以动态地生成正确的URL。
如果您需要从服务器动态加载图片,您可以将`imageUrl`属性设置为从服务器获取的URL。例如:
```html
<template>
<div>
<img :src="imageUrl" alt="My Image">
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: null
}
},
mounted() {
// Fetch the image URL from the server
fetch('https://example.com/api/get-image-url')
.then(response => response.json())
.then(data => {
this.imageUrl = data.url;
});
}
}
</script>
```
在这个示例中,我们在`mounted`生命周期钩子中使用`fetch`函数从服务器获取图片的URL。一旦我们获取到URL,我们将其设置为组件的`imageUrl`属性,并让Vue自动更新`<img>`标记的`src`属性。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)