vue 中使用v-lazy进行跨域图片加载如何进行配置才能让图片显示

在 Vue 中使用 v-lazy 进行跨域图片加载时，需要进行以下配置才能让图片显示：

1. 在项目的根目录下创建 vue.config.js 文件；
2. 在 vue.config.js 文件中添加以下代码：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.transformAssetUrls = {
          img: ['src', 'lazy-src'],
          source: 'src',
          video: ['src', 'poster']
        }
        return options
      })
  }
}

这段代码的作用是配置 vue-loader，使其能够识别 lazy-src 属性，并将其转换为 src 属性，以便 v-lazy 能够正常加载图片。

3. 使用 v-lazy 属性加载图片时，将图片的 src 属性替换为 lazy-src 属性，如下所示：

<img v-lazy="image.lazySrc">

其中，image.lazySrc 是一个动态绑定的属性，用于指定图片的地址。

通过以上配置和使用，就可以在 Vue 中使用 v-lazy 进行跨域图片加载并正常显示了。

相关问题

vue 使用v-lazy 跨域图片文件显示不了

如果你使用 `v-lazy` 指令来加载跨域图片，可能会遇到跨域问题，因为浏览器默认情况下不允许在跨域资源中使用 `canvas` API 来读取图像数据。解决这个问题有两种方法：

1. 在服务器端设置响应头 `Access-Control-Allow-Origin` 来允许跨域访问。具体实现方法可以参考 [CORS（跨域资源共享）详解](https://www.ruanyifeng.com/blog/2016/04/cors.html)。

2. 将图片转换为 base64 编码的格式，然后将编码后的字符串作为 `img` 标签的 `src` 属性值。这样就不需要跨域访问了。具体实现方法可以使用 `FileReader` API 将图片文件读取为 base64 编码的字符串，然后将字符串赋值给 `img` 标签的 `src` 属性。示例代码如下：

   <template>
     <div>
       <img :src="lazyImg" v-lazy />
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         lazyImg: ''
       }
     },
     mounted() {
       this.loadImg()
     },
     methods: {
       loadImg() {
         const reader = new FileReader()
         reader.onload = (e) => {
           this.lazyImg = e.target.result
         }
         reader.readAsDataURL('http://example.com/image.jpg')
       }
     }
   }
   </script>

希望这些信息能对你有所帮助！

Vue.use(Lazyload, { })正在加载和加载错误

如果在 Vue.js 中使用 Lazyload 插件，但是出现了正在加载和加载错误的情况，可能有以下几个原因：

1. 图片地址不正确。请确保需要进行懒加载的图片地址正确，可以通过打开图片链接确认是否可以正常访问。

2. 图片地址没有使用 HTTPS 协议。如果您的网站是 HTTPS 协议，但是图片地址是 HTTP 协议，可能会导致图片无法加载。

3. 图片地址没有设置跨域访问头部。如果需要加载的图片地址与您的网站不在同一域名下，可能需要在图片服务器上设置跨域访问头部。

4. 图片资源太大。如果需要加载的图片资源太大，可能会导致懒加载的过程出现问题。可以尝试使用其他方式加载图片，如预加载等。

5. Lazyload 插件的配置选项不正确。请确保 Lazyload 插件的配置选项正确，特别是根据需要设置 loading 和 error 图片的地址。

6. 图片加载速度过慢。如果您的网站访问速度较慢，可能会导致图片加载速度过慢，出现正在加载或加载错误的情况。

如果以上情况都已排除，还是无法解决问题，可以查看浏览器控制台是否有报错信息，进一步排查问题。