vue 用图片地址发起get请求返回图片加密数据,后解密渲染,使用 vue-lazyload
时间: 2024-06-08 12:09:38 浏览: 118
vue中实现先请求数据再渲染dom分享
首先,你需要在 Vue 中使用 Axios 库来发起 GET 请求。在请求成功后,你可以将响应数据转换为 Base64 编码的字符串,然后将其存储在 Vue 组件的 data 中。
接下来,你可以使用 vue-lazyload 插件来渲染图片。在渲染时,你需要将 Base64 编码的字符串解码成原始的图片数据,并将其指定为 img 标签的 src 属性,即可将图片显示出来。
下面是一个示例代码:
```html
<template>
<div>
<img v-lazy="imageData" />
</div>
</template>
<script>
import axios from 'axios';
import { toBase64 } from 'js-base64';
export default {
data() {
return {
imageUrl: 'https://example.com/image.png',
imageData: null,
};
},
mounted() {
this.getImageData();
},
methods: {
getImageData() {
axios.get(this.imageUrl, {
responseType: 'arraybuffer',
}).then((response) => {
const imageData = toBase64(response.data);
this.imageData = `data:image/png;base64,${imageData}`;
});
},
},
};
</script>
```
在这个示例中,我们首先定义了一个 imageUrl 属性,用于存储图片的地址。在 mounted 钩子函数中,我们调用 getImageData 方法来发起 GET 请求,并将响应数据转换为 Base64 编码的字符串,并将其存储在 imageData 属性中。
然后,在模板中,我们使用了 vue-lazyload 插件来渲染图片。具体来说,我们将 imageData 属性绑定到 img 标签的 v-lazy 指令上,这会告诉插件在需要显示图片时才去加载数据。
最后,我们还使用了 js-base64 库来进行 Base64 编码和解码操作。在 getImageData 方法中,我们将响应数据转换为 Base64 编码的字符串,而在模板中,我们将其解码并指定为 img 标签的 src 属性。
阅读全文