如何顯示某些值的某些圖像

所以，我正在製作這個應用程序。我基本上想要做的是顯示當前的溫度，然後顯示穿着大衣的人的圖像或沒有穿大衣的人的圖像。我已經有當前的臨時顯示，（我正在使用該值的API）但我無法弄清楚如何做圖像的一部分。我使用HTML和Javascript（使用JQuery和JSON與API一起使用）。我知道我可能。需要使用if語句，但我不知道如何在JavaScript中使用圖像。我將temp插入表中，我希望圖像與表中的temp相同。如何顯示某些值的某些圖像

的JavaScript和HTML（這是很基本的）低於

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

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

來源

2017-03-09 ineedtoknow

有幾種方法可以使用。我更喜歡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'; 
}

來源

2017-03-09 21:07:37 Nosajimiki

剛剛運行的代碼，我得到錯誤400：參數密鑰從URL中缺少。這是故意的還是你從他們的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插入到您的Web應用程序。

來源

2017-03-09 21:02:52 Neil

對不起，我排除了我的API密鑰（因爲它是私有的，我不得不創建一個帳戶，以獲得一個。）因此，你不能運行代碼 – ineedtoknow

你能不能從推斷我的例子？關於hwo添加圖片並設置src標籤的任何問題？ – Neil

只需使用<img>標籤，並設置src屬性，使用javascript：

// 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，並隨後將通過下列方式改變天氣像你腳本。

來源

2017-03-09 21:05:17

如何顯示某些值的某些圖像

回答

相關問題