import VueLazyload from 'vue-lazyload'; Vue.directive('lazyload', { inserted: (el, binding) => { const imageUrl = binding.value; // 图片链接 const key = "RZM15kr$Oh=IxG#o"; axios.get(imageUrl, { responseType: "arraybuffer", }).then((response)=>{ const encrypted_data = response.data; const KEY_arr = new TextEncoder().encode(key); const decrypted_data = new Uint8Array(encrypted_data); for (let i = 0; i < 100; i++) { decrypted_data[i] ^= KEY_arr[i % KEY_arr.length]; } el.src = URL.createObjectURL( new Blob([decrypted_data], { type: "image/png" }) ); Vue.nextTick(() => { VueLazyload.lazyComponentUpdate(); // 手动触发图片的懒加载 }); loadImage(imageUrl) .then(decryptedData => { // 解密数据并生成图片地址 el.src = decryptedData.imageUrl; Vue.nextTick(() => { VueLazyload.lazyLoadHandler(); // 手动触发图片的懒加载 }); }) .catch(error => { console.error('Error loading image:', error); }); }); }, }); Vue.use(VueLazyload, { error: '@/assets/img/yes_bg.svg', loading: '@/assets/img/yes_bg.svg', });报错触发不了手动懒加载

根据代码和报错信息，可能是因为在 `inserted` 钩子函数中使用了异步操作，导致手动触发懒加载时图片还没有加载完毕。可以尝试在 `axios.get` 方法中添加一个 `await`，确保图片加载完成后才进行解密和手动懒加载触发，例如：

inserted: async (el, binding) => {
  const imageUrl = binding.value;
  const key = "RZM15kr$Oh=IxG#o";
  try {
    const response = await axios.get(imageUrl, {
      responseType: "arraybuffer",
    });
    const encrypted_data = response.data;
    const KEY_arr = new TextEncoder().encode(key);
    const decrypted_data = new Uint8Array(encrypted_data);
    for (let i = 0; i < 100; i++) {
      decrypted_data[i] ^= KEY_arr[i % KEY_arr.length];
    }
    el.src = URL.createObjectURL(
      new Blob([decrypted_data], { type: "image/png" })
    );
    await Vue.nextTick(); // 等待图片加载完成
    VueLazyload.lazyComponentUpdate(); // 手动触发图片的懒加载
  } catch (error) {
    console.error('Error loading image:', error);
  }
}

另外，使用 `Vue.use(VueLazyload)` 时，应该在 `main.js` 中引入并注册该插件，而不是在组件中使用 `import` 引入。