### 質問内容・実現したいこと `Node.js`, `Express` を用いて、`S3`にアップロードした画像を表示したいと考えています。アップロードはうまくいったのですが、それらの画像を一覧で複数表示する方法が分からず、詰まっています。 ### どの処理までうまく動いているのか画像のアップロードは、AWSコンソールより成功が確認できています。また、S3のデータオブジェクト取得はできており、中身は確認できる状態です。 ### 該当のソースコード ```JavaScript:routes/images.js const express = require('express'); const router = express.Router(); require('dotenv').config(); const aws = require('aws-sdk'); const s3 = new aws.S3({ accessKeyId: process.env.accessKeyId, secretAccessKey: process.env.secretAccessKey, region: process.env.region, }); const multer = require('multer'); const multerS3 = require('multer-s3'); const upload = multer({ storage: multerS3({ s3: s3, bucket: 'node-image-app2', metadata: function (req, file, cb) { cb(null, {fieldName: file.fieldname}); }, key: function (req, file, cb) { cb(null, Date.now().toString()) } }) }) // Get images // ここで、S3から画像データ一覧を取得し、ビューに渡したい router.get('/images', (req, res, next) => { if (req.isAuthenticated()) { const params = { Bucket: 'node-image-app2', MaxKeys: 10 }; s3.listObjectsV2(params, function(err, data) { if (err) console.log(err, err.stack); else { console.log(data) res.render('images.ejs', { images: data.Contents, }) } }) } }) // Create images router.post('/images/upload', upload.single('image'), (req, res, next) => { if (req.file) { console.log('Image uploaded!'); res.redirect('/images'); } else { console.log('Image can not uploaded!') res.render('image.ejs'); } }) module.exports = router; ``` ```html

<% images.forEach(image => { %>

class="card-image-top" alt="">

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

<% }) %> ``` ### エラーから考えられる原因現状、ビューの`images`には以下のようなオブジェクトが渡っています。 ``` // console.log(data)の結果 // imagesにはContentsの部分が渡っています。 { IsTruncated: false, Contents: [ { Key: '1651713720822', LastModified: 2022-05-05T01:22:02.000Z, ETag: '"3cde5fdfd55c16a46b6a14839fbedd8f"', ChecksumAlgorithm: [], Size: 3531593, StorageClass: 'STANDARD' }, { Key: '1651717508819', LastModified: 2022-05-05T02:25:10.000Z, ETag: '"8c0850b99d34051342904d8b0bd66bdf"', ChecksumAlgorithm: [], Size: 14356, StorageClass: 'STANDARD' } ], Name: 'node-image-app2', Prefix: '', MaxKeys: 10, CommonPrefixes: [], KeyCount: 2 } ``` ビューで画像を表示するためには、画像のURLが必要であり、それが渡っていないことが原因と考えています。 ```

class="card-image-top" alt="">```の`image`に画像のURLを渡す必要があると考え、以下のことを試しました。 ### 試したこと ##### オブジェクトURLを渡す。 AWSコンソールにてオブジェクトURLを直接取得し、ビューに表示させました。 ```html // 特定の１つの画像を表示することはできた

	@@ -1 +1 @@
1	- S3に保存した画像をブラウザに表示できない
1	+ 【Node.js】S3に保存した画像をブラウザに表示できない

質問編集履歴