質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

751閲覧

【Vue.js】lightboxパッケージでクリック後の画像が表示されない

honyao

総合スコア40

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/08/15 16:18

編集2019/08/19 10:29

前提・実現したいこと

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', } },

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

imageListを作る時点でrequireしたらどうでしょうか?

imageList = [ { 'name': require('@/assets/image1.jpg'), 'alt': 'image1', 'id': 'image1' } ]

一応私の環境(VueCLI3)では動いています。

投稿2019/08/18 13:05

8zca

総合スコア559

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

honyao

2019/08/19 10:16 編集

回答ありがとうございます。期待通りの動作が実装できました。 thumbnailDir が不要になるので削除し、template 内も thumb.name とするだけでpathが通りました。 的確な回答に感謝いたします。 ※変更箇所は追記
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問