如何以某些值显示某些图像
[英]How to show certain images for certain values
问题描述
So, I'm making this application. 
因此，我正在制作此应用程序。 What I basically want to do is to show the current temperature, and then show an image of someone wearing a coat or an image of someone not wearing a coat. 我基本上想要做的是显示当前温度，然后显示穿着外套的人的图像或不穿着外套的人的图像。 I already have the current temp showing, (I'm using an API for that value) But I can't figure out how to do the image part. 我已经显示了当前的临时工，（我使用的是该值的API），但我不知道如何处理图像。 I'm using HTML, and Javascript (with JQuery and JSON to use with the API). 我正在使用HTML和Javascript（与要与API一起使用的JQuery和JSON）。 I know that I prob. 我知道我有事。 need to use an if statement, but I don't know how to use images in javascript. 需要使用if语句，但是我不知道如何在javascript中使用图像。 I'm inserting the temp into a table, and I would like for the image to be in the same row as the temp in the table. 我将临时表插入表中，我希望图像与表中的临时表位于同一行。
The Javascript and the HTML(it's pretty basic) is below 下面是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>
3 个解决方案
解决方案1
0 2017-03-09 21:02:52
Just ran the code, I get error 400: parameter key is missing from the url. 刚运行代码，我得到错误400：URL中缺少参数键。 Is that intentional or did you copy and paste from their api documentation? 这是故意的，还是您从其api文档中复制并粘贴了？ Anyway. 无论如何。 The way how you add an image is by doing: 添加图像的方式是：
var $img = $("<img>").attr("src","http://example.com/test.png");
$img.appendTo($item);
OR: 要么：
I noticed you are using .text() to replace the contents of td. 我注意到您正在使用.text（）替换td的内容。 What if you used .html(). 如果使用.html（）怎么办。 .html() allows you to add html directly into the td. .html（）允许您将html直接添加到td中。 So you coul do: 因此，您可以：
$item.html("<img src='" + src + "' />");
Just wanted to add that in case they are sending you HTML to insert into your web application. 只是想补充一下，以防他们向您发送HTML插入您的Web应用程序。
解决方案2
0 2017-03-09 21:05:17
Just use the <img> tag and set the src attribute with javascript: 只需使用<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>
The image is initially filled with a transparent gif and will then be changed to the weather image by your script. 该图像最初填充有透明的gif，然后将由您的脚本更改为天气图像。
解决方案3
0 已采纳 2017-03-09 21:07:37
There are a few methods you can use. 您可以使用几种方法。 I prefer the innerHTML method which rewrites the HTML contents of an element to whatever you want which makes it very flexible. 我更喜欢使用innerHTML方法将元素的HTML内容重写为所需的任何内容，这使其变得非常灵活。
HTML HTML
<div id="myImg"></div>
JavaScript JavaScript的
if ($itemVal > 50) {
document.getElementById("myImg").innerHTML = '<img src="./images/img1.jpg">';
} else {
document.getElementById("myImg").innerHTML = '<img src="./images/img2.jpg">';
}
Alternately you can change just the src attribute of an image: 或者，您可以只更改图像的src属性：
HTML HTML
<img id="myImg" src="./images/img1.jpg">
JavaScript JavaScript的
if ($itemVal > 50) {
document.getElementById('myImage').src='./images/img1.jpg';
} else {
document.getElementById('myImage').src='./images/img2.jpg';
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.