前提・実現したいこと
vue-my-photosというパッケージを使ってlightboxをつくろうと考えています.
###環境
Node.js 8.16.0
npm 6.4.1
Vue.js 3.10.0
発生している問題・エラーメッセージ
Githubのdemoコードを参考に設定しましたが,npm run serve
でテストサーバを立ち上げると,サムネイル画像は表示されますが,クリック後の拡大画像(元の画像)が表示されません.
開発者ツールでクリック後の画像のパスを確認すると,./assets/gazo1.png
となっており,Base64エンコードされていないようです.
■ディレクトリ
src
│ App.vue
│ main.js
│
├─assets
│ │ gazo1.png
│ │ gazo2.png
│
└─components
該当のソースコード
main.js
import Lightbox from 'vue-my-photos' Vue.component('lightbox', Lightbox);
App.vue
A) :src
のパスにrequire()
を使うとサムネイルは表示される
B) showLightbox()
の引数にthumb.name
を指定しても,①同様requireを使用しても./assets/gazo1.png
となる
thumbnailDir
は'/src/assets/'
から'./assets/'
に変更しています.
<template> <div> <transition-group name="thumbnailfade" tag="div"> // A,B <img v-for="thumb in filteredImages" :key="thumb.id" @click="showLightbox(thumb.name)" :src="require(`${thumbnailDir + thumb.name}`)" :alt="thumb.alt" :title="thumb.alt" /> </transition-group> <lightbox ref="lightbox" :images="images" :directory="thumbnailDir" :timeoutDuration="5000" ></lightbox> </div> </template> <script> data () { return { thumbnailDir: './assets/', // <-変更 images: imageList, galleryFilter: 'all', } }, methods: { showLightbox: function(imageName) { this.$refs.lightbox.show(imageName); // <-ここ? }, }, computed: { filteredImages: function() { if (this.galleryFilter === 'all') { return this.images; } else { return this.images.filter(image => image.filter === this.galleryFilter); } } } } </script>
showLightbox
内のshow(imageName)
のところで画像のパスを渡せていないと思われるのですが,どのように設定したらクリック後の画像が表示されるでしょうか.
ご教授いただければ幸いです.
#追記
回答を受けての修正です。
App.vue
// template <img v-for="thumb in filteredImages" :key="thumb.id" @click="showLightbox(thumb.name)" :src="thumb.name" :alt="thumb.alt" :title="thumb.alt" /> // script var imageList = [ {'name': require('@/assets/gazo1.png'), 'alt':'画像1', 'filter':'nature', 'id':'image1' }, { ~画像2 省略~ } ]; // export default data () { return { // thumbnailDir は削除 images: imageList, galleryFilter: 'all', } },
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/19 10:16 編集