2016-03-26 15 views
0

Bu, görüntüyü başarıyla görüntüleyen tam URL'dir. JSON özelliği "simgesi" denJSON görüntü değeri HTML img etiketine nasıl atanır?

http://openweathermap.org/img/w/04d.png

Not değerini "04d" sağlar ve bunu kullanmak için bir url içine atmak bana düşer. Sadece bir referans olarak

JSON yolu burada, doğrudur başarıyla görüntü saklanır aynı JSON özelliğinden metin görüntülenir nasıl olduğunu göstermeye.

document.getElementById ("weatherDescriptionData") .innerHTML = data.weather [0]. Açıklama;

Bu

Bu benim resim göstermek için çabaladılar ilk yöntemdir HTML img etiketi

<img src="" id="weatherIconData"></div> 

olduğunu. (sağa kaydırın)

Bu, resmi göstermek için başarısız çalıştığım ikinci yöntemdir.

$("#weatherIconData").prop('src', "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png"); 

kontrol ettim ve

console.log(data.weather[0].icon); 

gerçeği dönüş 04D yaptığı ortaya koymuştur.

JSON'da sağlanan görüntü bir HTML görünümünde nasıl görüntülenir?

+0

@PencilCreate [user6101582 cevabı @] (http://stackoverflow.com/a/36236176/227299) biraz daha fazla ayrıntı ekleyin. Kabul edilen cevap işe yarayabilir, ancak gerçek anlamda anlaşılmamış bir problemin etrafında çalıştığı için doğru çözüm değildir.'$ (' # Id ') '' document.getElementById (' id ') 'üzerinde kullanılmasının bir nedeni yoktur. –

cevap

2

deneyin jquery

$("#weatherIconData").attr('src', 'http://openweathermap.org/img/w/' + data.weather[0].icon + '.png'); 

html etiketi de bir <img> olarak başlar ancak <img id="" src="" />

$(function() { 
 
    var data = { 
 
    weather: [{ 
 
     icon: '04d' 
 
    }] 
 
    }; 
 
    
 
    $("#weatherIconData").attr('src', 'http://openweathermap.org/img/w/' + data.weather[0].icon + '.png'); 
 
});
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<img src="" id="weatherIconData"/> 
 
</body> 
 
</html>

+0

attr çalıştı, teşekkürler – PencilCrate

+0

Genellikle yanıtları reddetmiyorum, ancak bu işe yaramıştı. şanstan, 'img' etiketini doğru bir şekilde kapatırsanız hile –

2

Sen <img /> yakın vermedi ile </div> yakın bununla kapatır .attr etiket.

<img id="weatherIconData" /> 

jQuery sorunu çalışmış olabilir ama önerilen @ user2950720 olarak doğru bir çözüm değildir. $('#id')prop üzerinde

-1

var data = { 
 
    weather: [{ 
 
    icon: '04d' 
 
    }] 
 
}; 
 

 
document.getElementById("weatherIconData").src = "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png";;
<img src="" id="weatherIconData">

document.getElementById('id') üzerinde kullanın attr kullanılması gerektiğini hiçbir neden yoktur. Ben düzenlenmiş Working Fiddle

$("#weatherIconData").attr('src', "...."); 
+0

Evet! ortak Bay downvoter. Hatamı açıkla. Bir Adam Olun –

+0

Daha ne kadar alabilirim ?? –

+1

I upvoted. Önce kullanıcı2950720 teklif etse bile doğru cevabı verdiniz. Teşekkürler. – PencilCrate

İlgili konular