在 vue 中使用 fotorama

Question

我正在尝试在我的 vue-cli 项目中使用 Fotorama（图片库）。 jQuery 3.5.1 和 Fotorama 使用 NPM 安装。代码部分：

<script>
    import 'jquery'
    import 'fotorama/fotorama'

    export default {
        // ...
    }
</script>

我收到这个错误：

Uncaught Fotorama requires jQuery 1.8 or later and will not run without it.

如何让它发挥作用？

我在做：

用过jquery和fotorama相同版本没有vue。有效
通过在挂载的钩子上添加script标签使用cdn版本
将 jquery 和 fotorama 放入 assets 文件夹。 Vue 显示 jquery 文件
在 index.html 中添加了脚本标签。它的工作原理是 50/50。我无法解释这个，但是这个选项在页面重新加载时随机起作用。
已将 jquery 和 fotorama 合并为 1 个文件

对不起，如果我的问题有错误，我的英语不好。我问这个问题在我社区的子域上，但他们帮不了我。也许还有其他图书馆提供这样的机会。主要是他们有点重，知道滚动时如何加载图片（不是一次全部加载）

Answer 1

您收到的错误表明 jQuery 可能已过时（尽管通过 npm 下载时不应发生这种情况）。

您绝对可以尝试使用以下方式更新软件包：npm update jquery

第二个问题可能是您在 vue 组件中导入 jquery 的方式。

试试这个：import $ from 'jquery';

您还简单提到了您需要一个轻一点的库，滚动时加载图片。我建议尝试 Macy.js。它只有 4kb，所以它比 jQuery 本身小得多。

Answer 2

我能够解决这个问题。

methods {
    // add script tags to head
    loadFotorama() {
        let script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js';
        document.documentElement.firstChild.appendChild(script);
    },
    loadJquery() {
        let script = document.createElement('script');
        script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js';
        document.documentElement.firstChild.appendChild(script);
    }
},
created() {
    this.loadJquery()
},
computed: {
    // this property is true when the server sent links to the desired images
    // images are added to the DOM using v-for
    imagesLoaded() {
        return this.$store.getters.getImagesLoaded
    }
},
watch: {
    imagesLoaded(val) {
        if (val) {
            // while fotorama loads from cdn server vue will create img tags using v-for
            this.loadFotorama()
        }
    } 
}

效果不错！感谢所有试图提供帮助的人

在 vue 中使用 fotorama

Using fotorama in vue

jquery

vue.js

fotorama