如何:JSON图像URL显示为实际图像

How: JSON image URL display as actual image

本文关键字：图像显示 URL JSON 如何更新时间：2023-09-26

下面的JS代码获取JSON对象并将其打印在网页上，但只打印文本。I.E.这打印图像URL（实际文本）而不是显示实际图像。我如何更改下面的代码。。。在代码中的某个位置添加img src=以显示页面上的实际图像？

	function onShowtimesLoaded(data){
			var movieArray = data.results[0].movie;
			movieArray.forEach(function(el, index) {
				
	       		var elm = document.createElement('div');
	       		elm.setAttribute('id','movie_'+parseInt(index+1));
	       		elm.appendChild(document.createElement('br'));
	       		elm.appendChild(document.createTextNode("Movie Title: " + el.movieTitle));
	       		elm.appendChild(document.createElement('br'));
	       		elm.appendChild(document.createTextNode("Movie Poster: " + el.poster));
	       		elm.appendChild(document.createElement('br'));
	       		elm.appendChild(document.createTextNode("Movie Show Times: " ));
	       		var showtimes = el.showtimes.forEach(function(element, index) {
					elm.appendChild(document.createTextNode("  "+element.time+"  "));
				});
				document.getElementById("MovieContainer").appendChild(elm);
			});
    }
	function callAPI() {
		var pincode = document.getElementById("pincode").value;
	    (function(){
	            //note the "onShowtimesLoaded" at the end
	            var src = 'closesttheater-'+pincode+'.json?format=json&callback=onShowtimesLoaded';
	            script = document.createElement('SCRIPT');
	            script.src = src;
	            document.head.appendChild(script);
	    })();
    }

这听起来对吧？

<script>
function onShowtimesLoaded(data){
            var movieArray = data.results[0].movie;
            movieArray.forEach(function(el, index) {
                var elm = document.createElement('div');
                elm.setAttribute('id','movie_'+parseInt(index+1));
                elm.appendChild(document.createElement('br'));
                elm.appendChild(document.createTextNode("Movie Title: " + el.movieTitle));
                elm.appendChild(document.createElement('br'));
                var tmp_img = document.createElement('img');
                tmp_img.src = el.poster;
                elm.appendChild(document.createTextNode("Movie Poster: " ));
                elm.appendChild(tmp_img);
                elm.appendChild(document.createElement('br'));
                elm.appendChild(document.createTextNode("Movie Show Times: " ));
                var showtimes = el.showtimes.forEach(function(element, index) {
                    elm.appendChild(document.createTextNode("  "+element.time+"  "));
                });
                document.getElementById("MovieContainer").appendChild(elm);
            });
    }
    function callAPI() {
        var pincode = document.getElementById("pincode").value;
        (function(){
                //note the "onShowtimesLoaded" at the end
                var src = 'closesttheater-'+pincode+'.json?format=json&callback=onShowtimesLoaded';
                script = document.createElement('SCRIPT');
                script.src = src;
                document.head.appendChild(script);
        })();
    }
    </script>