Question

所以，我正在制作这个应用程序。我基本上想要做的是显示当前的温度，然后显示穿着大衣的人的图像或没有穿大衣的人的图像。我已经有当前的临时显示，（我正在使用该值的API）但我无法弄清楚如何做图像部分。我正在使用HTML和Javascript（使用JQuery和JSON与API一起使用）。我知道我有问题。需要使用if语句，但我不知道如何在javascript中使用图像。我正在将temp插入表中，我希望图像与表中的temp位于同一行。

Javascript和HTML（非常基本）位于

之下

(function() {
	"use strict";
	
	var main = function() {
		var url = 'http://api.worldweatheronline.com/premium/v1/weather.ashx?key=MY_PRIVATE_KEY&num_of_days=2&format=JSON&callback=?';
		$.getJSON(url, function(weatherResponse) {
			console.log(weatherResponse);
			var $weatherTable = $('<table>');
			var response = weatherResponse.data.current_condition[0];
			var count = 0;
                for (var prop in response) {
                    if (count == 16) { 
				        var $item = $('<tr>');
				        var $itemProp = $('<td>').text(prop);
				        var $itemVal = $('<td>').text(response[prop]);
				        $item.append("Temperature feels like: ");
				        $item.append($itemVal);
				        $weatherTable.append($item);
                    }
                    count = count+1;
                }
			
			$('main').append($weatherTable);
		});
	};
	
	$(document).ready(main);
}());

<html>
	<head>
		<title>Weather</title>
	</head>
	<body>
		
		<header>
			<h1>Weather</h1>
		</header>
		
		<main>
						
		</main>
		
		<footer>
			<p>Made by </p>
		</footer>
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		<script src='sun.js'></script>
	</body>
</html>

Answer 1

刚刚运行代码，我收到错误400：网址中缺少参数密钥。这是故意的还是您从他们的api文档中复制和粘贴？无论如何。添加图像的方式是：

var $img = $("<img>").attr("src","http://example.com/test.png");
$img.appendTo($item);

OR：

我注意到你正在使用.text（）来替换td的内容。如果您使用.html（）会怎么样？ .html（）允许您直接将html添加到td中。所以你可以这样做：

$item.html("<img src='" + src + "' />");

只是想添加它，以防他们向您发送HTML以插入您的网络应用程序。

Answer 2

只需使用<img>代码并使用javascript设置src属性：

＆＃13;

// START demo code, random sun or rain
var images = {rain: 'http://images.clipartpanda.com/rain-clipart-789e6b6991418ddbf20bc8f9f7a3bdfc.jpg', sun: 'http://images.clipartpanda.com/clipart-sun-11971486551534036964ivak_Decorative_Sun.svg.med.png'}
var doesItRain = Math.floor(Math.random()*2);
var imageUrl = doesItRain ? images.rain : images.sun;
// END demo code, just fill imageUrl and use the following line
$('#weather').attr('src', imageUrl);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <h1>Weather</h1>
</header>
<main>
  <img id="weather" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Weather">
</main>

＆＃13;

图像最初用透明的gif填充，然后由脚本更改为天气图像。

Answer 3

您可以使用一些方法。我更喜欢innerHTML方法，它将元素的HTML内容重写为您想要的任何内容，这使得它非常灵活。

<强> HTML

<div id="myImg"></div>

<强>的JavaScript

if ($itemVal > 50) {
    document.getElementById("myImg").innerHTML = '<img src="./images/img1.jpg">';
} else {
    document.getElementById("myImg").innerHTML = '<img src="./images/img2.jpg">';
}

或者，您可以只更改图像的src属性：

<强> HTML

<img id="myImg" src="./images/img1.jpg">

<强>的JavaScript

if ($itemVal > 50) {
  document.getElementById('myImage').src='./images/img1.jpg';
} else {
  document.getElementById('myImage').src='./images/img2.jpg';
}

如何针对特定值显示某些图像

3 个答案: