vue 怎么解决用图片链接发起get请求先获取加密数据再渲染,怎么做懒加载
时间: 2023-06-27 20:02:38 浏览: 111
vue3自定义指令实现图片懒加载
对于使用图片链接发起 GET 请求获取加密数据的情况,可以使用 `fetch` 或者 `axios` 等库来发送异步请求,然后在获取到数据后再进行渲染。具体实现可以按照以下步骤:
1. 在 Vue 组件中定义一个变量 `imageUrl`,将图片链接赋值给它。
2. 在 `mounted` 生命周期中,使用 `fetch` 或者 `axios` 发送 GET 请求获取加密数据,并且将返回的数据保存到组件的另外一个变量中,比如 `encryptedData`。
3. 在获取到 `encryptedData` 后,可以使用加密算法进行解密操作,得到真正的图片地址并将其赋值给 `imageUrl` 变量。这样就完成了数据获取和渲染的过程。
至于懒加载,可以使用 `vue-lazyload` 等库来实现。具体实现方法如下:
1. 安装 `vue-lazyload` 库:`npm install vue-lazyload`
2. 在 Vue 组件中引入 `vue-lazyload` 库:
```
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
loading: require('path/to/loading/image')
})
```
3. 将 `imageUrl` 变量与 `v-lazy` 指令绑定起来:
```
<template>
<img v-lazy="imageUrl">
</template>
```
这样就可以实现图片的懒加载了。当组件被渲染出来时,`vue-lazyload` 会将 `loading` 图片显示出来,等到真正的图片加载完成后再进行替换。
阅读全文