vue img发起get请求
时间: 2023-06-11 17:10:20 浏览: 46
在 Vue 中,可以使用 `img` 标签来加载图片,而不需要发起 GET 请求。例如:
```html
<template>
<div>
<img :src="imageUrl" alt="image">
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: 'https://example.com/image.jpg'
}
}
}
</script>
```
在上面的例子中,`img` 标签的 `src` 属性直接设置为图片的 URL 地址,当组件渲染时,浏览器会自动发起 GET 请求来获取图片。注意,这里使用了 Vue 的数据绑定语法 `:src`,将 `imageUrl` 变量的值绑定到 `img` 标签的 `src` 属性上。
相关问题
vue 加密img发起get请求
如果你想在 Vue 中使用加密的图片 URL 发起 GET 请求,你可以使用 JavaScript 的 Fetch API 来实现。以下是一个简单的示例代码:
```javascript
// 导入加密库
import CryptoJS from 'crypto-js'
// 声明图片 URL 和秘钥
const imgUrl = 'https://example.com/image.jpg'
const secretKey = 'my-secret-key'
// 对图片 URL 进行加密
const encryptedUrl = CryptoJS.AES.encrypt(imgUrl, secretKey).toString()
// 发起 GET 请求并下载图片
fetch(encryptedUrl)
.then(response => response.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = 'image.jpg'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
})
```
在这个示例中,我们先使用 CryptoJS 库对图片 URL 进行了加密,然后使用 Fetch API 发起 GET 请求。在响应中,我们将响应体转换为 blob,并使用 URL.createObjectURL() 方法创建一个 URL 对象。接着,我们创建一个 `<a>` 元素,设置它的 href 属性为图片的 URL 对象,download 属性为文件名,并将它添加到 DOM 中。最后,我们触发了该元素的 click 事件,触发浏览器下载该图片。
vue 图片链接发起get请求如果图片进入了可视区域,下载并解密图片
对于这个问题,可以考虑使用 Vue.js 的生命周期钩子函数 `mounted` 和 `beforeDestroy` 来监听图片是否进入可视区域,使用 `axios` 库发送 GET 请求获取图片,并使用相应的解密算法解密图片。
以下是一个简单的示例代码:
```
<template>
<div>
<img :src="imageSrc" ref="image" />
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
imageSrc: null,
};
},
mounted() {
// 监听图片是否进入可视区域
this.$nextTick(() => {
window.addEventListener('scroll', this.handleScroll);
this.handleScroll();
});
},
beforeDestroy() {
// 取消监听
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
const rect = this.$refs.image.getBoundingClientRect();
const isVisible = (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
if (isVisible && !this.imageSrc) {
// 发送 GET 请求获取图片
axios.get('https://example.com/image-url').then(response => {
// 解密图片
const decryptedImage = this.decryptImage(response.data);
// 将解密后的图片数据赋值给 imageSrc,页面会自动更新显示图片
this.imageSrc = decryptedImage;
});
}
},
decryptImage(imageData) {
// 解密算法
// ...
return decryptedImageData;
},
},
};
</script>
```
需要注意的是,这只是一个简单的示例代码,具体的实现方式可能会根据具体的需求和解密算法而有所不同。同时,为了防止滚动事件频繁触发,可以考虑添加一个节流函数或者防抖函数。