変数を使用してimgを動的に表示

Question

私はLocal Weatherアプリフリーコードキャンプチャレンジを進めています。私は、変数を作成して表示するには、AJAX呼び出しから返されたJSONPを使用しています私のJavascriptファイルで

<div id="weather-icon-placeholder"></div> 

、：

私のhtmlファイルで

私は天気アイコン画像用のdivセット・アップを持っていますdiv内の正しいアイコン。

$('#weather-icon-placeholder').html('<img src="/images/partly-cloudy-night.png" >'); 
// hard coded, it displays the image 

しかし、私は天気アイコンを動的に選択されるように変数を作成しようとした場合、私はそれを言って404エラーメッセージが表示されます。

は今、このようなイメージで私のハードコードでは、それは、画像を表示する場合imagesフォルダを見つけることができません：より多くのコンテキストをご希望の方は

var imagePNG = weather.currently.icon + '.png'; 
console.log(imagePNG); // partly-cloudy-night.png 
$('#weather-icon-placeholder').html('<img src="/images/" + imagePNG >'); 
// this returns a 404 error, can't find images folder 

を、ここでJS fileへのURLです。

これがなぜ機能していないかについてのご指摘を感謝します。ありがとうございます！

Answer 1

は、文字列の外にそれを追加する必要があり、文字列には、変数補間がないので、私は、変数の左に単一引用符を移動することを

'<img src="/images/"' + imagePNG > 

に

'<img src="/images/" + imagePNG >' 

を未変更してみてください

Answer 2

変数をエスケープして連結するのを忘れていますが、現時点では可変値以外の実際の文字列"imagePNG"があります。また、それは属性src="..."の文字列の外側なので、同様に終了"を移動することを確認してください：

$('#weather-icon-placeholder').html('<img src="/images/' + imagePNG + '" >'); 

Answer 3

問題が''です。 $('#weather-icon-placeholder').html('<img src="/images/" + imagePNG >');〜$('#weather-icon-placeholder').html('<img src="/images/"' + imagePNG + '>');に書き換えます。それが動作することを願っています。

Answer 4

あなたが今

var img = new Image(); 

を入力するとすぐに

$('#weather-icon-placeholder').html('<img src="/images/'+imagePNG+'" >'); 

Answer 5

わかりましたが、とてもコンソールにジャンプすることができますエラーが表示されますIDE、

を使用しようと考えてください入力した場合img何を取得するのですか

我々は

img.src = '/image/whatever.png' 

を入力すると

<img> 

のintersting ...

は今、私たちは、コンソールに再びIMGを入力すると、私たちはちょうど私たちが追加したsrc属性と同じを取得する必要があります。甘い！

は、今、私たちはそれがあったように見える最近の検査に..私は前に何が起こるか見て最後の部分の弾力をテストしていませんでした...

を

$('#weather-icon-placeholder').html(img); 

を要素を追加する必要があります構文エラー、そこにsrc定義...