답변 5개
function img_src_alternatives(img) {
if (img.onerror == null) {
img.onerror = function () {
let src_candidates = this.dataset.srcCandidates.split(',');
src_candidates = src_candidates.map((src) => src.trim());
src_candidates = src_candidates.filter((src) => src.length > 0);
if (src_candidates.length == 0) {
this.onerror = null;
return;
}
this.src = src_candidates.shift();
this.dataset.srcCandidates = src_candidates.toString();
}
}
}
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('img[data-src-candidates]').forEach((img, idx, arr) => {
img_src_alternatives(img);
});
});
댓글을 작성하려면 로그인이 필요합니다.
img_1.onerror = () => {
img_1.id = "img_2";
img_2.src = "B";
img_2.onerror = () => {
img_2.src = "C";
}
}
그런데 온에러 이벤트는 F12 에서 빨간색이 들어와서
php 에서 file_exists() 등으로 파일존재유무를 파악하는 것이 좋습니다.
자바스크립트에서 이미지파일이 존재하는지 확인하려면 아작스로 이미지url 자체를 땡겨서 404 오류메시지를 뿜어내면 그 이미지가 없는 것으로 판단하는 꼼수도 있긴 합니다.
댓글을 작성하려면 로그인이 필요합니다.
cuwaaangphp file_exists 함수를 찾아보시고
파일유무에 따라서 if문으로 처리하면될듯합니다.
댓글을 작성하려면 로그인이 필요합니다.
이런식으로 $img1 $img2 $img3 를 미리 변수에 담아놓고 처리할수도 있어요.
댓글을 작성하려면 로그인이 필요합니다.
function replaceImage(img) {
if (img.src.endsWith("A")) {
img.src = "B";
} else if (img.src.endsWith("B")) {
img.src = "C";
}
}
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인