vue img发起get请求

在 Vue 中，可以使用 `img` 标签来加载图片，而不需要发起 GET 请求。例如：

<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 来实现。以下是一个简单的示例代码：

// 导入加密库
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请求获取加密数据后解密渲染，懒加载效果失效，图片在视图才发起get请求

这个问题可能是由于图片懒加载插件的实现方式导致的。一些懒加载插件是通过监听页面滚动事件来判断图片是否进入视图区域，然后再发起请求进行加载。但是，如果图片是通过get请求获取加密数据后再解密渲染的，那么在请求加密数据的过程中，图片的真实地址是未知的，插件无法判断图片是否进入视图区域，因此懒加载效果就会失效。

解决这个问题的方法是，在页面加载时，先将所有图片的真实地址获取并存储到一个数组中，然后再将这些图片的真实地址设置到对应的img标签的data-src属性中，最后再使用懒加载插件进行加载。这样就可以避免上述问题的发生，同时也能实现图片的懒加载。

具体实现可以参考以下代码：

<template>
  <div>
    <img v-for="(item, index) in imgList" :key="index" :data-src="item.realSrc" src="占位图片地址" class="lazyload">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: []
    }
  },
  created() {
    // 在页面加载时获取图片真实地址并存储到数组中
    this.getImgList()
  },
  methods: {
    async getImgList() {
      // 发起get请求获取加密数据并解密，获取图片真实地址
      const res = await axios.get('api/getImgList')
      const data = res.data
      this.imgList = data.map(item => {
        return {
          realSrc: this.decrypt(item.src)
        }
      })
    },
    decrypt(src) {
      // 解密函数
      // ...
    }
  }
}
</script>

<style>
/* 懒加载插件样式 */
.lazyload {
  opacity: 0;
  transition: opacity 0.3s;
}
.lazyload.lazyloaded {
  opacity: 1;
}
</style>

在这个例子中，我们使用了一个名为lazyload的懒加载插件，并将所有图片的真实地址存储在了imgList数组中。在页面加载时，我们通过发起get请求获取加密数据并解密，获取所有图片的真实地址，并将其存储到imgList数组中。然后，我们将这些图片的真实地址设置到对应的img标签的data-src属性中，并将src属性设置为占位图片地址。最后，我们使用懒加载插件进行加载。

需要注意的是，在Vue中使用懒加载插件时，需要将class属性设置为“lazyload”，并在CSS中进行样式设置。同时，懒加载插件通常会将加载完成的图片的class属性修改为“lazyload lazyloaded”，因此我们需要在CSS中对这个样式进行设置。