vue-lazyload 怎么做用图片链接发起get请求获取数据后解密生成图片地址
时间: 2023-12-08 15:03:18 浏览: 110
前端实现图片懒加载(lazyload)的两种方式
首先,你需要在 Vue 项目中安装 `axios` 和 `crypto-js` 两个库,可以使用以下命令安装:
```bash
npm install axios crypto-js --save
```
然后,在需要使用懒加载的组件中,可以通过 `axios` 发起 GET 请求获取加密的图片地址,再使用 `crypto-js` 库进行解密,最后将解密后的图片地址作为 `v-lazy` 的值绑定到 `img` 标签上即可。
以下是一个示例代码:
```html
<template>
<div>
<img v-lazy="imageUrl" alt="lazy-loaded image">
</div>
</template>
<script>
import axios from 'axios';
import CryptoJS from 'crypto-js';
export default {
data() {
return {
imageUrl: ''
};
},
created() {
axios.get('your_api_url_here').then(response => {
const encryptedImageUrl = response.data.imageUrl;
const decryptedImageUrl = CryptoJS.AES.decrypt(encryptedImageUrl, 'your_secret_key_here').toString(CryptoJS.enc.Utf8);
this.imageUrl = decryptedImageUrl;
}).catch(error => {
console.log(error);
});
}
}
</script>
```
在上面的代码中,`your_api_url_here` 是你发送 GET 请求的接口地址,`imageUrl` 是你需要绑定到 `img` 标签的 `v-lazy` 值,`your_secret_key_here` 是你用于加密和解密图片地址的密钥。
需要注意的是,这里的解密方式仅是示例,具体的加密和解密方式可以根据实际情况进行修改。
阅读全文