Rumah > Artikel > hujung hadapan web > Bagaimanakah saya boleh mengubah suai kod JavaScript ini untuk mendapatkan URL imej daripada fail JSON dan memaparkannya dalam HTML?
Bagaimanakah saya boleh mengubah suai kod JavaScript ini untuk mendapatkan URL imej daripada fail JSON dan memaparkannya dalam HTML?
- PHPzke hadapan
- 2023-08-31 11:41:09796semak imbas
Ini boleh dilakukan dengan menggunakan kaedah JavaScript JSON.parse() untuk menghuraikan fail JSON dan mengekstrak URL imej yang dikehendaki. Anda kemudian boleh membuat teg img HTML dan menetapkan atribut sumber kepada URL tersebut. Akhir sekali, anda boleh menambahkan teg img ini pada elemen HTML sedia ada untuk memaparkannya pada halaman anda.
Ini memerlukan sedikit pengetahuan asas tentang sintaks JavaScript dan kebiasaan dengan struktur dan penghuraian JSON. Berbekalkan kemahiran ini, anda sepatutnya tidak menghadapi masalah mengubah suai kod anda untuk mencapai matlamat anda!
Mari selami artikel ini untuk lebih memahami cara mengubah suai kod JavaScript untuk mendapatkan URL imej daripada fail Json dan memaparkannya dalam HTML.
Gunakan JSON.parse()
Kaedah statik JSON.parse() Cipta nilai atau objek JavaScript dengan menghuraikan rentetan JSON. Fungsi reviver pilihan boleh digunakan untuk menggunakan transformasi sebelum mengembalikan objek hasil.
Tatabahasa
Berikut ialah sintaks JSON.parse() -
JSON.parse(text) JSON.parse(text, reviver)
Contoh
Pertimbangkan contoh berikut di mana kami menggunakan JSON.parse(), jalankan skrip dan paparkan imej.
<!DOCTYPE html>
<html>
<body>
<div id="tutorial"></div>
<script>
json_data = '{"icon_url": "https://www.tutorialspoint.com/images/logo.png"}';
json_data = JSON.parse(json_data);
var getimage = document.createElement("img");
getimage.onload = function() {
document.getElementById("tutorial").appendChild(getimage);
}
getimage.src = json_data.icon_url;
</script>
</body>
</html>
Apabila skrip dilaksanakan, ia akan menghasilkan output yang terdiri daripada imej, yang dipaparkan pada halaman web menggunakan JSON.parse().
Contoh
Laksanakan skrip di bawah dan perhatikan cara kami menggunakan JSON.parse() untuk mendapatkan imej dipaparkan pada halaman web.
<!DOCTYPE html>
<html>
<body>
<button id="button" >click</button>
<img id="tutorial" alt="Bagaimanakah saya boleh mengubah suai kod JavaScript ini untuk mendapatkan URL imej daripada fail JSON dan memaparkannya dalam HTML?" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("#button").on("click",function(){
var json='{"status":200,"count":1,"data":[{"image":"https://www.tutorialspoint.com/images/logo.png"}]}';
var obj = jQuery.parseJSON(json);
imagedata = obj.data[0].image;
if (imagedata == ""){
$( "#tutorial" ).attr('src', "imageerror.jpg");
} else {
$( "#tutorial" ).attr('src', imagedata);
}
});
</script>
</body>
</html>
Apabila menjalankan skrip di atas, tetingkap output akan muncul menunjukkan butang klik pada halaman web. Apabila pengguna mengklik butang, peristiwa itu dicetuskan dan imej dipaparkan pada halaman web.
Contoh
Dalam contoh di bawah, kami menjalankan skrip, mendapatkan URL imej dan memaparkannya pada halaman web.
<!DOCTYPE html>
<html>
<body>
<div id="tutorial"></div>
<script>
var data = {
"images": [{
"image1": "https://www.tutorialspoint.com/images/logo.png"
}, {
"image1": "https://www.tutorialspoint.com/static/images/logo-color.png"
}, {
"image1": "https://www.tutorialspoint.com/html/images/html-mini-logo.jpg"
}, ]
};
data.images.forEach(function(obj) {
var image = new Image();
image.src = obj.image1;
document.getElementById("tutorial").appendChild(image);
})
</script>
</body>
</html>
Apabila skrip dilaksanakan, ia akan menghasilkan output yang terdiri daripada imej yang dipaparkan pada halaman web.
Atas ialah kandungan terperinci Bagaimanakah saya boleh mengubah suai kod JavaScript ini untuk mendapatkan URL imej daripada fail JSON dan memaparkannya dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!