前提・実現したいこと
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);
よろしくおねがいします
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/14 00:29