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

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