Vue.js - 无法使用 Blazy

Question

我想使用 Blazy 包在我的 Vue.js 项目中延迟加载图像。我通过 npm 安装了它，但我无法导入它并使用它。我把这段代码放在 App.vue 的 created 方法中：

const bLazy = new Blazy({})

以及用于显示带有图像的项目的组件中的这段代码：

<img src="placeholder" :data-src="image-src" class="w-100 rounded" :alt="name">

现在我尝试导入它并使其工作：

import Blazy from 'blazy' => 没用。

import * as Blazy from 'blazy' => 没用。

require('blazy') => "ReferenceError: Blazy is not defined".

const Blazy = require('blazy') => 没用。

让它工作的正确方法是什么？

Answer 1

这既不是 Vue 问题也不是 npm 问题。 Blazy 是一个相当古老的库（最后一次更新是在 2 年前）并且不支持模块导入语法（因为它不是模块）。 您有两个选择：

1. 为此找一个更好的库，最好是 Vue 的插件。
2. 将包的代码复制到您 src 中的一个文件并导出 Blazy 对象。