如何以某些值显示某些图像

Question

因此，我正在制作此应用程序。 我基本上想要做的是显示当前温度，然后显示穿着外套的人的图像或不穿着外套的人的图像。 我已经显示了当前的临时工，（我使用的是该值的API），但我不知道如何处理图像。 我正在使用HTML和Javascript（与要与API一起使用的JQuery和JSON）。 我知道我有事。 需要使用if语句，但是我不知道如何在javascript中使用图像。 我将临时表插入表中，我希望图像与表中的临时表位于同一行。

下面是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：URL中缺少参数键。 这是故意的，还是您从其api文档中复制并粘贴了？ 无论如何。 添加图像的方式是：

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

要么：

我注意到您正在使用.text（）替换td的内容。 如果使用.html（）怎么办。 .html（）允许您将html直接添加到td中。 因此，您可以：

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

只是想补充一下，以防他们向您发送HTML插入您的Web应用程序。

Answer 2

只需使用<img>标记并使用javascript设置src属性即可：

 // 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);

 <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>

该图像最初填充有透明的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 个解决方案

解决方案1
0 2017-03-09 21:02:52

解决方案2
0 2017-03-09 21:05:17

解决方案3
0 已采纳 2017-03-09 21:07:37

如何以某些值显示某些图像

问题描述

3 个解决方案

解决方案1 0 2017-03-09 21:02:52

解决方案2 0 2017-03-09 21:05:17

解决方案3 0 已采纳 2017-03-09 21:07:37

解决方案1
0 2017-03-09 21:02:52

解决方案2
0 2017-03-09 21:05:17

解决方案3
0 已采纳 2017-03-09 21:07:37