이미지 경로가 실제 이미지로 연결되는지 확인하는 방법이 있습니까? 즉, 이미지가 Javascript에서로드되지 않을 때 감지합니다.
웹 앱의 경우 xml 파일을 구문 분석하고 이미지 경로 목록에서 HTML 이미지를 동적으로 만듭니다. 일부 이미지 경로가 더 이상 서버에 존재하지 않을 수 있으므로 HTML img 요소를로드하고 삭제하는 데 실패한 이미지를 감지하여 정상적으로 실패하고 싶습니다.
참고 JQuery 솔루션은 사용할 수 없습니다 (상사는 JQuery를 사용하고 싶지 않습니다. 예, 시작하지 않습니다). 이미지가로드 될 때 JQuery에서 감지하는 방법을 알고 있지만 실패했는지 여부는 알 수 없습니다.
img 요소를 만드는 코드는 img 경로가 이미지로드 실패로 이어지는 지 어떻게 감지 할 수 있습니까?
var imgObj = new Image(); // document.createElement("img");
imgObj.src = src;
답변
다음 코드를 시도해 볼 수 있습니다. 그래도 브라우저 호환성을 보장 할 수 없으므로 테스트해야합니다.
function testImage(URL) {
var tester=new Image();
tester.onload=imageFound;
tester.onerror=imageNotFound;
tester.src=URL;
}
function imageFound() {
alert('That image is found and loaded');
}
function imageNotFound() {
alert('That image was not found.');
}
testImage("http://foo.com/bar.jpg");
그리고 jQuery에 저항하는 보스에 대한 제 공감입니다!
답변
대답은 좋지만 한 가지 문제가 있습니다. onload
또는 onerror
직접 할당 할 때마다 이전에 할당 된 콜백을 대체 할 수 있습니다. 이것이 MDN에서 말하는 것처럼 “호출 된 EventTarget에 지정된 리스너를 등록” 하는 멋진 메서드가있는 이유 입니다. 동일한 이벤트에 원하는만큼 리스너를 등록 할 수 있습니다.
대답을 조금 다시 작성하겠습니다.
function testImage(url) {
var tester = new Image();
tester.addEventListener('load', imageFound);
tester.addEventListener('error', imageNotFound);
tester.src = url;
}
function imageFound() {
alert('That image is found and loaded');
}
function imageNotFound() {
alert('That image was not found.');
}
testImage("http://foo.com/bar.jpg");
외부 리소스 로딩 프로세스는 비동기 적이므로 다음과 같은 약속과 함께 최신 JavaScript를 사용하는 것이 더 좋습니다.
function testImage(url) {
// Define the promise
const imgPromise = new Promise(function imgPromise(resolve, reject) {
// Create the image
const imgElement = new Image();
// When image is loaded, resolve the promise
imgElement.addEventListener('load', function imgOnLoad() {
resolve(this);
});
// When there's an error during load, reject the promise
imgElement.addEventListener('error', function imgOnError() {
reject();
})
// Assign URL
imgElement.src = url;
});
return imgPromise;
}
testImage("http://foo.com/bar.jpg").then(
function fulfilled(img) {
console.log('That image is found and loaded', img);
},
function rejected() {
console.log('That image was not found');
}
);
답변
이:
<img onerror="this.src='/images/image.png'" src="...">
답변
/**
* Tests image load.
* @param {String} url
* @returns {Promise}
*/
function testImageUrl(url) {
return new Promise(function(resolve, reject) {
var image = new Image();
image.addEventListener('load', resolve);
image.addEventListener('error', reject);
image.src = url;
});
}
return testImageUrl(imageUrl).then(function imageLoaded(e) {
return imageUrl;
})
.catch(function imageFailed(e) {
return defaultImageUrl;
});
답변
img 용 jQuery + CSS
jQuery를 사용하면 이것이 나를 위해 일하고 있습니다.
$('img').error(function() {
$(this).attr('src', '/no-img.png').addClass('no-img');
});
다음 CSS3 속성을 사용하여 크기에 관계없이 내 웹 사이트의 모든 곳에서이 사진을 사용할 수 있습니다.
img.no-img {
object-fit: cover;
object-position: 50% 50%;
}
팁 1 : 최소 800 x 800 픽셀 의 정사각형 이미지 를 사용하십시오 .
TIP 2 : 인물 사진 과 함께 사용하려면
object-position: 20% 50%;
background-img 전용 CSS
누락 된 배경 이미지의 경우 각 background-image
선언에 다음을 추가했습니다 .
background-image: url('path-to-image.png'), url('no-img.png');
참고 : 투명 이미지에는 작동하지 않습니다.
Apache 서버 측
또 다른 해결책은 브라우저로 보내기 전에 Apache로 누락 된 이미지를 감지하고 기본 no-img.png 콘텐츠로 교체하는 것입니다.
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} /images/.*\.(gif|jpg|jpeg|png)$
RewriteRule .* /images/no-img.png [L,R=307]
답변
다음은 다른 답변을 위해 작성한 함수입니다 : Javascript Image Url Verify . 나는 당신이 필요로 정확히 무엇인지 모르겠지만, 그것은을위한 핸들러를 포함 당신이 사용하는 것이 다양한 기술을 사용하여 onload
, onerror
, onabort
및 일반적인 타임 아웃을.
이미지로드는 비동기식이므로 이미지와 함께이 함수를 호출 한 다음 나중에 결과와 함께 콜백을 호출합니다.
답변
아래와 같이 :
var img = new Image();
img.src = imgUrl;
if (!img.complete) {
//has picture
}
else //not{
}