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

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

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

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

1回答

1677閲覧

<img>要素は存在するがimg自体が表示されない

mitts

総合スコア17

Vue.js

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

2クリップ

投稿2018/06/13 05:11

前提・実現したいこと

fetchで特定のディレクトリに格納されたImgのURLを取得してVuejsのcomponentをURLの分だけ列挙したい

発生している問題・エラーメッセージ

<img>要素は存在するがimg自体が表示されない
エラーメッセージはConsoleには表示されて居ません
Chromeの開発者メニューでbreak pointを置いてステップ実行を行った場合はimgが表示されます

イメージ説明

該当のソースコード

html

1<!DOCTYPE HTML> 2<html> 3 4<head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7<!--中略--> 8 9</head> 10 11<body> 12 13 14 <div class="container-fluid" id="fh5co-image-grid"> 15 <div class="grid" id="image-area"> 16 <div class="grid-sizer"></div> 17 <image-component 18 v-for="(elm, index) in imageList" 19 v-bind:elm = "elm" 20 v-bind:key="index"> 21 </image-component> 22 </div> 23 </div> 24 25 26 <!-- jQuery --> 27 <script src="js/jquery.min.js"></script> 28 <!-- Vue JS --> 29 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 30 31 32 <script> 33 Vue.component('image-component', { 34 props: ['elm'], 35 template: '<div class="grid-item item animate-box" data-animate-effect="fadeIn">\ 36 <a v-bind:href="elm" class="image-popup" title="Name of photo or title here">\ 37 <div class="img-wrap">\ 38 <img v-bind:src="elm" alt="" class="img-responsive">\ 39 </div>\ 40 <div class="text-wrap">\ 41 <div class="text-inner popup">\ 42 <div>\ 43 <h2>Name of photo or title here</h2>\ 44 </div>\ 45 </div>\ 46 </div>\ 47 </a>\ 48 </div>' 49 }) 50 51 const image = new Vue({ 52 el: '#image-area', 53 data: function(){ 54 return { 55 imageList:[] 56 }; 57 }, 58 created: function(){ 59 fetch('/imageList/kyoto').then(function (response) { 60 return response.json(); 61 }).then((json) => { 62 this.imageList = json.fileList; 63 }); 64 } 65 }) 66 </script> 67</body> 68 69</html>

js

1var express = require('express'); 2var app = express(); 3var config = require('./config'); 4var fs = require('fs'); 5 6app.get('/',function(req,res){ 7 res.sendfile(__dirname + '/index.html'); 8}); 9 10app.get('/:id',function(req,res){ 11 res.sendfile(__dirname + '/' + req.params.id); 12}); 13 14app.get('/imageList/:id',function(req,res){ 15 var dirName = req.params.id; 16 fs.readdir(__dirname + '/images/' + dirName,function(err,files){ 17 if(err) throw err; 18 var fileList = files.filter(function(file){ 19 return /.*.(jpg|png)$/.test(file); //絞り込み 20 }); 21 var fileListExt = []; 22 fileList.forEach(file => { 23 fileListExt.push('/images/' + dirName+ '/' + file); 24 }); 25 res.json({fileList : fileListExt}); 26 }); 27}); 28 29app.use('/css', express.static('css')); 30app.use('/images', express.static('images')); 31app.use('/js', express.static('js')); 32app.use('/fonts', express.static('fonts')); 33 34app.listen(config.port);

よろしくおねがいします

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

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

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

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

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

guest

回答1

0

vueのライフサイクルフックをcreatedからmountedにかえてみるとどうでしょうか?

投稿2018/06/13 14:13

euledge

総合スコア2404

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

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

mitts

2018/06/14 00:29

そちらも試してみましたが<img>も表示されない状態になりました。 コメントありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問