HTML의 src 속성이 ![]()
유효하지 않은 경우 기본 이미지를 입력 하시겠습니까?
속성이 유효하지 않은 경우 (HTML 만 사용) HTML <img>태그 에서 기본 이미지를 렌더링하는 방법이 src있습니까? 그렇지 않은 경우 간단한 해결 방법은 무엇입니까?
HTML 전용 솔루션을 요청했습니다 ...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Object Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p>
<object data="http://stackoverflow.com/does-not-exist.png" type="image/png">
<img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such">
</object>
</p>
</body>
</html>첫 번째 이미지가 없기 때문에 폴백 (이 웹 사이트에서 사용 된 스프라이트 *)이 표시됩니다. 당신이 사용하는 경우 그리고 정말 지원하지 않는 오래된 브라우저를 object, 그냥 그 태그를 무시하고 사용하는 img태그를. 호환성에 대해서는 caniuse 웹 사이트를 참조하십시오 . 2018 년 현재이 요소는 ie6 +의 모든 브라우저에서 광범위하게 지원됩니다.
* 이미지에 대한 URL이 변경되지 않는 한 (다시),이 경우 대체 텍스트가 표시 될 것입니다.
이것은 나를 위해 잘 작동합니다. JQuery를 사용하여 이벤트를 연결하고 싶을 수도 있습니다.
<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';">
자카드 오류 가드로 업데이트
업데이트 : 최근에 CSS 전용 솔루션 Vitaly Friedman 데모에서 알지 못하는 훌륭한 CSS 솔루션을 보았습니다 . 아이디어는 content깨진 이미지에 속성 을 적용하는 것입니다 . 일반적으로 :after또는 :before이미지에는 적용되지 않지만 이미지가 깨지면 적용됩니다.
<img src="nothere.jpg">
<style>
img:before {
content: ' ';
display: block;
position: absolute;
height: 50px;
width: 50px;
background-image: url(ishere.jpg);
</style>
데모 : https://jsfiddle.net/uz2gmh2k/2/
바이올린에서 알 수 있듯이 깨진 이미지 자체는 제거되지 않지만 JS 또는 CSS의 gobs가없는 대부분의 경우 문제를 해결할 것입니다. 다른 위치에 다른 이미지를 적용해야하는 경우 간단히 클래스로 구분하십시오..my-special-case img:before { ...
Spring in Action 3rd Ed에서이 솔루션을 찾았습니다.
<img src="../resources/images/Image1.jpg" onerror="this.src='../resources/images/none.jpg'" />
업데이트 : 이것은 HTML 전용 솔루션이 아닙니다 ... onerrorJavascript입니다
<style type="text/css">
img {
background-image: url('/images/default.png')
}
</style>
이미지의 크기와 이미지를 타일로 표시할지 여부를 입력하십시오.
HTML 만 사용하는 것이 가능하다고 생각하지 않습니다. 그러나 자바 스크립트를 사용하면 가능합니다. 기본적으로 우리는 각 이미지를 반복하고 이미지가 완전한지 테스트하고 naturalWidth가 0인지 여부를 테스트합니다. 코드는 다음과 같습니다.
fixBrokenImages = function( url ){
var img = document.getElementsByTagName('img');
var i=0, l=img.length;
for(;i<l;i++){
var t = img[i];
if(t.naturalWidth === 0){
//this image is broken
t.src = url;
}
}
}
다음과 같이 사용하십시오.
window.onload = function() {
fixBrokenImages('example.com/image.png');
}
Chrome 및 Firefox에서 테스트
Angular / jQuery를 사용하는 경우 도움이 될 수 있습니다 ...
<img ng-src="{{item.url}}" altSrc="{{item.alt_url}}" onerror="this.src = $(this).attr('altSrc')">
설명
null 일 수 item있는 속성 url이 있다고 가정하면 이미지가 깨진 것으로 표시됩니다. onerror위에서 설명한 것처럼 특성 표현식의 실행을 트리거합니다 . src위에서 설명한대로 속성 을 재정의해야 하지만 altSrc에 액세스하려면 jQuery가 필요합니다. 바닐라 JavaScript로 작동하지 못했습니다.
약간 해키처럼 보이지만 내 프로젝트에서 하루를 절약했습니다.
<img style="background-image: url(image1), url(image2);"></img> 여러 이미지를 추가 할 수있는 배경 이미지를 사용하십시오. 내 경우 : image1은 기본 이미지이며, 이것은 어떤 곳에서 가져옵니다 (브라우저가 요청을 수행함) image2는 image1 이로 드되는 동안 표시되는 기본 로컬 이미지입니다. image1이 어떤 종류의 오류를 반환하면 사용자에게 변경 사항이 표시되지 않으며 사용자 경험을 위해 깨끗합니다.
간단한 img 요소는 매우 유연하지 않으므로 그림 요소와 결합했습니다. 이런 식으로 CSS가 필요하지 않습니다. 오류가 발생하면 모든 srcset이 대체 버전으로 설정됩니다. 깨진 링크 이미지가 표시되지 않습니다. 불필요한 이미지 버전을로드하지 않습니다. 그림 요소는 반응 형 디자인 및 브라우저에서 지원하지 않는 유형에 대한 여러 대체를 지원합니다.
<picture>
<source id="s1" srcset="image1_not_supported_by_browser.webp" type="image/webp">
<source id="s2" srcset="image2_broken_link.png" type="image/png">
<img src="image3_fallback.jpg" alt="" onerror="this.onerror=null;document.getElementById('s1').srcset=document.getElementById('s2').srcset=this.src;">
</picture>
삽입 할 이미지의 크기 를 아는 것이 유일한 요구 사항 인 HTML 전용 솔루션 입니다. background-image필러로 사용 되는 투명 이미지에는 작동하지 않습니다 .
background-image주어진 이미지가없는 경우 나타나는 이미지를 성공적 으로 연결하는 데 사용할 수 있습니다 . 그런 다음 유일한 문제는 깨진 아이콘 이미지입니다. 매우 큰 빈 문자를 삽입하여 콘텐츠를 표시 밖으로 밀어서 제거 할 수 있습니다 img.
img {
background-image: url("http://placehold.it/200x200");
overflow: hidden;
}
img:before {
content: " ";
font-size: 1000px;
}This image is missing:
<img src="a.jpg" style="width: 200px; height: 200px"/><br/>
And is displaying the placeholderCSS 전용 솔루션 (웹킷 만 해당)
img:before {
content: " ";
font-size: 1000px;
background-image: url("http://placehold.it/200x200");
display: block;
width: 200px;
height: 200px;
position: relative;
z-index: 0;
margin-bottom: -16px;
}This image is there:
<img src="http://placehold.it/100x100"/><br/>
This image is missing:
<img src="a.jpg"/><br/>
And is displaying the placeholder각도 2 :
<img src="{{foo.url}}" onerror="this.src='path/to/altimg.png'">
페이지를 보려고하는 수많은 클라이언트 (브라우저)를 확신 할 수있는 방법이 없습니다. 고려해야 할 한 가지 측면은 이메일 클라이언트가 사실상 웹 브라우저이며 그러한 까다로운 문제를 처리하지 못할 수 있다는 것입니다 ...
따라서 이와 같이 DEFAULT WIDTH와 HEIGHT를 가진 alt / text도 포함해야합니다. 이것은 순수한 HTML 솔루션입니다.
alt="NO IMAGE" width="800" height="350"
따라서 다른 좋은 대답은 다음과 같이 약간 수정됩니다.
<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="NO IMAGE" width="800" height="350">
Chrome에서 객체 태그에 문제가 있었지만 이것이 적용 될 것이라고 생각합니다.
ALT / 텍스트를 더 크게 스타일링 할 수 있습니다.
그래서 내 대답은 멋진 alt / text fallback과 함께 Javascript를 사용하는 것입니다.
나는 또한이 흥미로운 것을 발견했다 : 이미지의 alt 속성을 스타일링하는 방법
JQuery 와 함께 수정 가능한 버전은 파일 끝에 다음을 추가하십시오.
<script>
$(function() {
$('img[data-src-error]').error(function() {
var o = $(this);
var errorSrc = o.attr('data-src-error');
if (o.attr('src') != errorSrc) {
o.attr('src', errorSrc);
}
});
});
</script>
그리고 당신의 img태그에 :
<img src="..." data-src-error="..." />
위의 해결 방법이 불완전 하여 속성이 누락되었습니다 src.
this.src과 this.attribute('src')동일하지 않은, 첫 번째 이미지의 전체 참조를 포함한다 예를 들어 http://my.host/error.jpg,하지만 특성은 원래의 값을 유지error.jpg
올바른 해결책
<img src="foo.jpg" onerror="if (this.src != 'error.jpg' && this.attribute('src') != 'error.jpg') this.src = 'error.jpg';" />
Angular 1.x를 사용하는 경우 원하는 수의 이미지로 대체 할 수있는 지시문을 포함 할 수 있습니다. 대체 속성은 단일 URL, 배열 내의 여러 URL 또는 범위 데이터를 사용하는 각도 표현식을 지원합니다.
<img ng-src="myFirstImage.png" fallback="'fallback1.png'" />
<img ng-src="myFirstImage.png" fallback="['fallback1.png', 'fallback2.png']" />
<img ng-src="myFirstImage.png" fallback="myData.arrayOfImagesToFallbackTo" />
각도 앱 모듈에 새 대체 지시문을 추가하십시오.
angular.module('app.services', [])
.directive('fallback', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var errorCount = 0;
// Hook the image element error event
angular.element(element).bind('error', function (err) {
var expressionFunc = $parse(attrs.fallback),
expressionResult,
imageUrl;
expressionResult = expressionFunc(scope);
if (typeof expressionResult === 'string') {
// The expression result is a string, use it as a url
imageUrl = expressionResult;
} else if (typeof expressionResult === 'object' && expressionResult instanceof Array) {
// The expression result is an array, grab an item from the array
// and use that as the image url
imageUrl = expressionResult[errorCount];
}
// Increment the error count so we can keep track
// of how many images we have tried
errorCount++;
angular.element(element).attr('src', imageUrl);
});
}
};
}])
좋은 답변과 의견이 포함 된 간단하고 깔끔한 솔루션입니다.
<img src="foo.jpg" onerror="this.src='error.jpg';this.onerror='';">
무한 루프 위험도 해결합니다.
나를 위해 일했다.
Jquery를 사용하면 다음과 같이 할 수 있습니다.
$(document).ready(function() {
if ($("img").attr("src") != null)
{
if ($("img").attr("src").toString() == "")
{
$("img").attr("src", "images/default.jpg");
}
}
else
{
$("img").attr("src", "images/default.jpg");
}
});
모든 이미지의 경우 다음 자바 스크립트 코드를 사용하십시오.
if (ptImage.naturalWidth == 0)
ptImage.src = '../../../../icons/blank.png';
여기서 ptImageA는 <img>태그 어드레스에 의해 얻어진 document.getElementById().
Google은이 페이지를 "image fallback html"키워드로 처리했지만 위의 내용 중 어느 것도 도움이되지 않아서 "9 미만의 IE에 대한 평균 대체 지원"을 찾고 있었기 때문에 검색을 계속했습니다.
<img src="base-image.svg" alt="picture" />
<!--[if (lte IE 8)|(!IE)]><image src="fallback-image.png" alt="picture" /><![endif]-->
주제가 아닌 것일 수도 있지만 내 문제를 해결했으며 다른 사람도 도울 수 있습니다.
크로스 플랫폼 앵귤러 js 솔루션을 찾고있는 사람들을 위해 Patrick의 훌륭한 답변 외에도 여기로 이동하십시오.
<object type="image/png" data-ng-attr-data="{{ url || 'data:' }}">
<!-- any html as a fallback -->
</object>
올바른 솔루션을 찾으려고 놀고있는 plunk는 다음과 같습니다. http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p=preview
동적 웹 프로젝트를 작성하고 WebContent에 필요한 이미지를 배치 한 경우 Spring MVC에서 아래 언급 된 코드를 사용하여 이미지에 액세스 할 수 있습니다.
<img src="Refresh.png" alt="Refresh" height="50" width="50">
img라는 폴더를 만들고 img 폴더 안에 이미지를 배치하고 해당 img 폴더를 WebContent 안에 배치하면 아래에 언급 된 코드를 사용하여 이미지에 액세스 할 수 있습니다.
<img src="img/Refresh.png" alt="Refresh" height="50" width="50">
잘!! 이 방법이 편리하다는 것을 알았습니다. 이미지의 높이 속성이 0인지 확인한 다음 src 속성을 기본 이미지로 덮어 쓸 수 있습니다 : https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/ 영상
image.setAttribute('src','../icons/<some_image>.png');
//check the height attribute.. if image is available then by default it will
//be 100 else 0
if(image.height == 0){
image.setAttribute('src','../icons/default.png');
}
'Programing' 카테고리의 다른 글
| JavaScript 또는 jQuery를 사용하여 새 탭에서 URL을 여는 방법은 무엇입니까? (0) | 2020.04.05 |
|---|---|
| 장고 날짜 시간 문제 (default = datetime.now ()) (0) | 2020.04.05 |
| NameValuePair를 사용하여 POST를 사용하여 HttpURLConnection에 매개 변수를 추가하는 방법 (0) | 2020.04.05 |
| 숫자가 홀수인지 짝수인지 테스트 (0) | 2020.04.05 |
| Android Toast가 Toast.LENGTH_LONG보다 길 수 있습니까? (0) | 2020.04.05 |