MSのホームページで以下のチュートリアルを実践しました。
チュートリアル: Visual Studio で Node.js と Express のアプリを作成する
https://cdn-ak.f.st-hatena.com/images/fotolife/g/gm_masami/20190411/20190411214958_120.jpg
チュートリアルの内容は、
Node.js と Express を使用して Visual Studio 開発を経験するというものです。
機能は、
ブラウザ上に組み込まれている3種類のボタンを押すとそれぞれで異なる画像が表示されます。
発生している問題
チュートリアルの通りに作業していけばブラウザ上に画像が表示されるはずなのですが・・・
コメントやボタンなどは表示されるのですが、肝心の画像が表示されず困っています。
C#でWebアプリを作ったのが初めてなので、プログラムのどの部分がうまくいっていないのか分かりません。
以下にチュートリアルで編集したソースファイルを載せます。
teratailのようなプログラマーの質問場への投稿が初めてなので、何か不足情報などありましたらご連絡下さい。
よろしくお願いします。
該当のソースコード
以下、「index.pug」と「index.js」です
index.pug
1 2~~~~~~~ここからindex.pug~~~~~~~ 3 4 5extends layout 6 7block content 8 h1= title 9 p Welcome to #{title} 10 script. 11 var f1 = function() { document.getElementById('myImage').src='#{data.item1}' } 12 script. 13 var f2 = function() { document.getElementById('myImage').src='#{data.item2}' } 14 script. 15 var f3 = function() { document.getElementById('myImage').src='#{data.item3}' } 16 17 button(onclick='f1()') One! 18 button(onclick='f2()') Two! 19 button(onclick='f3()') Three! 20 p 21 a: img(id='myImage' height='200' width='200' src='') 22 23 24~~~~~~~ここからindex.js~~~~~~~ 25 26'use strict'; 27var express = require('express'); 28var router = express.Router(); 29 30var getData = function () { 31 var data = { 32 'item1': 'http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-76.jpg', 33 'item2': 'http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-77.jpg', 34 'item3': 'http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-78.jpg' 35 } 36 return data; 37} 38 39/* GET home page. */ 40router.get('/', function (req, res) { 41 res.render('index', { title: 'Express', "data":getData}); 42}); 43 44module.exports = router; 45 46 47''''
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。