Q&A
前提
Javascriptでclassを使い、webapiを叩き、HTML上に画像を表示させたいのですが、画像が表示されません。
実現したいこと
HTML上にクラスを使い、画像を表示させたい。
発生している問題・エラーメッセージ
画像が表示されない
Uncaught ReferenceError: img is not defined at json_01.js:17:27
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>犬</title> 6</head> 7<body> 8 <div><img id='image'></div> 9 <script src="../js/json_01.js"></script> 10</body> 11</html>
Javascript
1const image=document.getElementById("image"); 2class Images{ 3 constructor(picture){ 4 this.picture = picture; 5 } 6getImg() { 7let img= this.picture (fetch('https:xxxxxxxxxxxxxxx') 8.then(response =>{ 9 return response.json(); 10})) 11 } 12} 13 let images=new Images(img);
試したこと
Javascript
1const image=document.getElementById("image"); 2fetch('https:xxxxxxxxxxxxxx') 3.then(response =>{ 4 return response.json(); 5 }) 6 .then(data =>{ 7 image.src = data['message']; 8 });
上記で試した所、写真は表示されるのですが、クラスに入れようとする時のやり方がわかりません。
よろしくお願いいたします。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
エラーの原因は new Images(img) の img という変数がないということで、たぶん image の間違いなんじゃないでしょうか。それ以外にも問題があります。
まずは期待通り動いた「試したこと」のコードをそのまま getImg() に入れて、image を this.picture に置き換えてみてはどうでしょうか。
投稿2022/11/06 23:38
総合スコア21929
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/11/09 03:14