와일드 카드가있는 URL에 이미지가 있는지 확인하십시오.

이미지를 표시하려고하지만 존재하지 않는 경우 기본 이미지로 되돌리려 고합니다. 그러나 이미지에는 이미지 확장자가있을 수 있습니다. 그렇다면 아래의 $.get() 함수에 와일드 카드를 추가하여 올바른 파일 이름을 가진 파일을 찾으려면 어떻게해야합니까? SRC에 실패 할 때와일드 카드가있는 URL에 이미지가 있는지 확인하십시오.

$.get('path/to/file.*') 
    .done(function() { 

    }).fail(function() { 

    });

출처

2015-01-14 babbaggeii

var validImageExtensions = ['jpg','png','gif']; function imageOrDefault(path, defaultPath, target, index){ var img = $('<img>'), extensionIndex = index || 0; $(img) .on('load', function(){ target.prop('src', img.prop('src')); }) .on('error', function(){ if (extensionIndex === validImageExtensions.length){ target.prop('src', defaultPath); } else { imageOrDefault(path, defaultPath, target, extensionIndex +1); } }); img.prop('src', path + '.' + validImageExtensions[extensionIndex]); }

입니다. 리소스를로드 할 때 정확한 경로를 지정해야합니다. 유효한 확장명 목록을 만들어 순서대로 시도해 볼 수 있습니다. –

'$ .get()'함수는 이미지를 찾지 않으며, 지정된 URL에서 특정 리소스를 요청합니다. 확장자 만 다른 URL이있는 웹 서버에 이미지가 여러 개있을 수 있습니다.이 경우 이미지를 선택 하시겠습니까? – nnnnnn

이미지 URL을 어떻게 얻습니까? http://example.com/*.jpg와 같은 이미지가 필요하십니까? –

img 요소는 error 이벤트를 발생시킵니다. 따라서 당신은 (1 개 요청이 만들어지고 + nImages을 의미) AJAX 요청에 대한 필요없이 다음과 같은 jQuery를 사용할 수 있습니다

$('img').on('error', function() { 
    $(this).prop('src', '/path-to/default-image.png'); 
});

출처

2015-01-14 10:57:54

확장명 목록을 시도하는 솔루션 아무도 기본을 적용합니다 작동하지 않는 경우 이미지는 할 수 없습니다 사용

imageOrDefault('path/to/image/without-extension', 'path/to/default.png', $('.target-selector'));

출처

2015-01-14 11:26:33

와일드 카드가있는 URL에 이미지가 있는지 확인하십시오.

답변

관련 문제