Menggunakan javascript, apakah ada cara untuk mengetahui apakah sumber daya tersedia di server? Misalnya saya memiliki gambar 1.jpg - 5.jpg yang dimuat ke halaman html. Saya ingin memanggil fungsi JavaScript setiap menit atau lebih yang kira-kira akan melakukan kode awal berikut ...
if "../imgs/6.jpg" exists:
var nImg = document.createElement("img6");
nImg.src = "../imgs/6.jpg";
Pikiran? Terima kasih!
javascript
0xhughes
sumber
sumber
fileExists
akan lebih baik nama karena fungsi ini tidak memeriksa apakah gambar ada di server. Ini memeriksa apakah file dapat diakses dari server. Tidak ada pemeriksaan apakah file itu benar-benar gambar. Bisa jadi .pdf, .html, beberapa file acak diubah namanya menjadi * .jpg atau * .png. Jika sesuatu diakhiri dengan .jpg itu tidak berarti itu 100% gambar :)Image
objek tidak mengalami batasan itu. Satu-satunya keuntungan dari ini adalah tidak benar-benar mengunduh gambar.Anda dapat menggunakan cara kerja prapemuat gambar dasar untuk menguji apakah gambar ada.
JSFiddle
sumber
return
pernyataan seperti yang dimiliki @ajtrichards di bagian pertama jawabannya.Anda dapat memeriksa apakah gambar dimuat atau tidak dengan menggunakan peristiwa bawaan yang disediakan untuk semua gambar.
Acara
onload
danonerror
akan memberi tahu Anda jika gambar berhasil dimuat atau jika terjadi kesalahan:sumber
error
penangan.Jika ada yang datang ke halaman ini ingin melakukan ini pada klien berbasis React , Anda dapat melakukan sesuatu seperti di bawah ini, yang merupakan jawaban asli yang diberikan oleh Sophia Alpert dari tim React di sini
sumber
Pendekatan yang lebih baik dan modern adalah menggunakan ES6 Fetch API untuk memeriksa apakah gambar ada atau tidak:
Pastikan Anda membuat permintaan yang sama-asal atau CORS diaktifkan di server.
sumber
Jika Anda membuat tag gambar dan menambahkannya ke DOM, baik peristiwa onload atau onerror harus diaktifkan. Jika onerror diaktifkan, gambar tidak ada di server.
sumber
Anda dapat memanggil fungsi JS ini untuk memeriksa apakah file ada di Server:
sumber
Pada dasarnya sebuah promisified versi @espascarello dan jawaban @adeneo, dengan parameter fallback:
Catatan: Saya pribadi mungkin lebih menyukai
fetch
solusinya, tetapi memiliki kekurangan - jika server Anda dikonfigurasi dengan cara tertentu, ia dapat mengembalikan 200/304, bahkan jika file Anda tidak ada. Ini, di sisi lain, akan melakukan pekerjaan itu.sumber
fetch
, Anda dapat menggunakanok
propertiresponse
objek untuk memeriksa apakah permintaan berhasil atau tidak:fetch(url).then(res => {if(res.ok){ /*exist*/} else {/*not exist*/}});
background-image: url('/a/broken/url')
memberi saya200
danok
(Chrome 74).Anda dapat melakukan ini dengan aksios Anda dengan mengatur jalur relatif ke folder gambar yang sesuai. Saya telah melakukan ini untuk mendapatkan file json. Anda dapat mencoba metode yang sama untuk file gambar, Anda dapat merujuk contoh ini
Jika Anda telah menyetel instance axios dengan baseurl sebagai server di domain yang berbeda, Anda harus menggunakan jalur lengkap server file statis tempat Anda menerapkan aplikasi web.
Jika gambar ditemukan maka respon akan menjadi 200 dan jika tidak, akan menjadi 404.
Selain itu, jika file gambar ada dalam folder assets di dalam src, Anda bisa melakukan Requirement, mendapatkan path dan melakukan panggilan di atas dengan path tersebut.
sumber
Ini berfungsi dengan baik:
sumber
Anda dapat merujuk tautan ini untuk memeriksa apakah file gambar ada dengan JavaScript.
sumber