如何在Rails和Importmap中导入PhotoSwipe

huangapple go评论48阅读模式
英文:

How to import PhotoSwipe with Rails and Importmap

问题

app/javascript/application.js 文件中,我添加了以下内容:

import PhotoSwipeLightbox from 'photoswipe';
document.addEventListener("turbo:load", function() {
  const lightbox = new PhotoSwipeLightbox({
    gallery: '#existing-files',
    children: '.gal',
    pswpModule: () => import('photoswipe')
  });
  lightbox.init();
});

但是在页面加载时,lightbox 立即打开,但图片丢失。pswpModule: () => import('photoswipe') 似乎不起作用,但也没有报错。

英文:

I've pinned photoswipe:

./bin/importmap pin photoswipe --download

in app/javascript/application.js I've added

import PhotoSwipeLightbox from 'photoswipe'
document.addEventListener("turbo:load", function() {
  const lightbox = new PhotoSwipeLightbox({
    gallery: '#existing-files',
    children: '.gal',
    pswpModule: () => import('photoswipe')
  });
  lightbox.init();
});

The lightbox opens straight away on page load but the image is missing. pswpModule: () => import('photoswipe') doesn't appear to work but no error is given.

答案1

得分: 1

我已解决。我需要:

./bin/importmap pin photoswipe --download
./bin/importmap pin photoswipe/lightbox --download

然后

import PhotoSwipeLightbox from 'photoswipe/lightbox'
英文:

I worked it out. I needed:

./bin/importmap pin photoswipe --download
./bin/importmap pin photoswipe/lightbox --download

then

import PhotoSwipeLightbox from 'photoswipe/lightbox'

huangapple
  • 本文由 发表于 2023年4月19日 17:43:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/76053027.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定