CSS/HTML만 사용하여 이미지 깨짐 아이콘을 숨기는 방법?
깨진 이미지 아이콘은 어떻게 숨길 수 있습니까?예:
오류 src가 있는 이미지가 있습니다.
<img src="Error.src"/>
솔루션은 모든 브라우저에서 작동해야 합니다.
이미지가 깨진 링크인지 CSS/HTML이 알 방법이 없기 때문에 무슨 일이 있어도 자바스크립트를 사용해야 합니다.
그러나 여기에는 이미지를 숨기거나 원본을 백업으로 바꾸는 최소한의 방법이 있습니다.
<img src="Error.src" onerror="this.style.display='none'"/>
아니면
<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>
갱신하다
이 논리를 여러 이미지에 한 번에 적용할 수 있는 방법은 다음과 같습니다.
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('img').forEach(function(img){
img.onerror = function(){this.style.display='none';};
})
});<img src="error.src">
<img src="error.src">
<img src="error.src">
<img src="error.src">업데이트2
CSS 옵션에 대해서는 아래의 Michalzuber의 답변을 참조하십시오.전체 이미지를 숨길 수는 없지만 깨진 아이콘의 모양은 바꿉니다.
사람들이 여기서 뭐라고 하든 자바스크립트는 전혀 필요 없고 CSS도 필요 없어요!
실제로 HTML로만 매우 가능하고 간단합니다.
이미지가 로드되지 않으면 기본 이미지를 표시할 수도 있습니다.이렇게...
이는 IE8까지 거슬러 올라가도 모든 브라우저에서 작동합니다. (2015년 9월 제가 호스팅한 사이트 방문자 250,000명 중 ZERO 사람들은 IE8보다 더 나쁜 것을 사용했습니다. 즉, 이 솔루션이 말 그대로 모든 것에 적합하다는 것을 의미합니다.)
1단계: img 대신 객체로 이미지를 참조합니다.개체에 장애가 발생하면 손상된 아이콘이 표시되지 않고 아무것도 하지 않습니다.IE8부터는 object와 img 태그를 혼용하여 사용할 수 있습니다.크기를 조정하여 일반 이미지로 가능한 모든 영광스러운 작업을 수행할 수도 있습니다.오브젝트 태그를 두려워하지 마십시오. 태그는 태그일 뿐이며, 크고 부피가 큰 것은 로드되지 않으며 속도가 저하되지 않습니다.다른 이름으로 IMG 태그를 사용하게 됩니다.속도 테스트 결과 이들은 동일하게 사용됩니다.
2단계: (선택사항이지만 멋진) 해당 개체 안에 기본 이미지를 삽입합니다.원하는 이미지가 개체에 실제로 로드되면 기본 이미지가 표시되지 않습니다.예를 들어 사용자 아바타 목록을 보여주고, 서버에 아직 이미지가 없는 사람이 있다면 자리 표시자 이미지를 보여줄 수 있습니다.자바스크립트나 CSS는 전혀 필요 없지만 대부분의 사람들이 자바스크립트를 사용하는 기능을 얻을 수 있습니다.
여기 암호가 있습니다...
<object data="avatar.jpg" type="image/jpeg">
<img src="default.jpg" />
</object>
... 네, 그렇게 간단합니다.
CSS로 기본 이미지를 구현하고 싶다면 HTML에서 이와 같이 더욱 간단하게 만들 수 있습니다.
<object class="avatar" data="user21.jpg" type="image/jpeg"></object>
...그리고 이 답변에서 CSS를 추가하기만 하면 됩니다 -> https://stackoverflow.com/a/32928240/3196360
https://bitsofco.de/styling-broken-images/ 에서 멋진 솔루션을 찾았습니다.
img {
position: relative;
}
/* style this to fit your needs */
/* and remove [alt] to apply to all images*/
img[alt]:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
font-family: 'Helvetica';
font-weight: 300;
line-height: 2;
text-align: center;
content: attr(alt);
}<img src="error">
<br>
<img src="broken" alt="A broken image">
<br>
<img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">alt="abc" 텍스트로 alt를 추가하면 손상된 썸네일 표시 및 alt 메시지 abc가 표시됩니다.
<img src="pic_trulli.jpg" alt="abc"/>
추가하지 않으면 손상된 썸네일 표시
<img src="pic_trulli.jpg"/>
파손된 것을 숨기려면 alt=""를 추가하면 손상된 썸네일과 (js를 사용하지 않고) 어떠한 alt 메시지도 표시되지 않습니다.
<img src="pic_trulli.jpg" alt=""/>
파손된 것을 숨기려면 alt="""&onerror="this.style.display="'none'를 추가하면 손상된 썸네일 및 알트 메시지가 표시되지 않습니다(js 포함).
<img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>
4번째는 조금 위험합니다(정확히는 아님). on error 이벤트에 이미지를 추가하려면 이미지가 style로 존재해도 표시되지 않습니다.display는 추가하는 것과 같습니다.따라서 다른 이미지를 표시할 필요가 없을 때 사용합니다.
display: 'none'; // in css
CSS로 주면 아이템이 표시되지 않습니다(image, iframe, div 등).
이미지를 표시하고 오류가 발생하면 완전히 빈 공간을 표시하려면 를 사용할 수 있지만 공간을 차지하지 않도록 주의해야 합니다.그래서 디브에 보관해야 할 것 같습니다.
링크 https://jsfiddle.net/02d9yshw/
텍스트 독립 속성으로 깨진 이미지 아이콘을 숨기는 것이 가장 쉬운 방법이라고 생각합니다.
img {
text-indent: -10000px
}
"alt" 속성을 보려면 분명히 작동하지 않습니다.
플레이스홀더로 이미지를 유지/필요한 경우 온 에러와 함께 불투명도를 0으로 변경하고 이미지 크기를 설정할 수 있습니다.이렇게 하면 끊어진 링크가 보이지 않지만 페이지가 정상적으로 로드됩니다.
<img src="<your-image-link->" onerror="this.style.opacity='0'" />
img {
width: 75px;
height: 100px;
}
저는 닉의 대답이 마음에 들어서 이 해결책을 가지고 놀고 있었습니다.더 깨끗한 방법을 찾았습니다.::before/:::pseudos가 img 및 object와 같은 대체 요소에서 작동하지 않으므로 object data(src)가 로드되지 않은 경우에만 작동합니다.HTML을 더 깨끗하게 유지하고 개체를 로드하지 못할 경우에만 의사를 추가합니다.
object {
position: relative;
float: left;
display: block;
width: 200px;
height: 200px;
margin-right: 20px;
border: 1px solid black;
}
object::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: '';
background: red url("http://placehold.it/200x200");
}<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object>
<object data="http://broken.img/url" type="image/png"></object>이미지 컨테이너가 나중에 채워지기 때문에 여전히 표시되어야 하고 표시 및 숨기기를 원하지 않는 경우 src 내부에 1x1 투명 이미지를 부착할 수 있습니다.
<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
저는 이것을 정확한 목적으로 사용했습니다.Ajax를 통해 이미지를 로드하는 이미지 컨테이너를 가지고 있었습니다.이미지가 크고 로딩에 다소 시간이 소요되었기 때문에 Gif 로딩바의 CSS에서 배경 이미지를 설정해야 했습니다.
그러나 의 src가 비어있었기 때문에 이를 사용하는 브라우저에는 깨진 이미지 아이콘이 여전히 나타납니다.
투명한 1x1 Gif를 설정하면 CSS나 자바스크립트를 통한 코드 추가 없이 간단하고 효과적으로 이 문제를 해결할 수 있습니다.
하는 것은 CSS CSS 를를 할 수 .background-image<img>태그...
이와 같은 것:
HTML
<div id="image"></div>
CSS
#image {
background-image: url(Error.src);
width: //width of image;
height: //height of image;
}
여기 작동하는 바이올린이 있습니다.
참고: 이미지가 어디에 있는지 보여주기 위해 fiddle의 CSS에 테두리를 추가했습니다.
다른 사람이 설명한 것과 같은 아이디어는 다음과 같이 반응에서 작동합니다.
<img src='YOUR-URL' onError={(e) => e.target.style.display='none' }/>
2005년부터 파이어폭스와 같은 모질라 브라우저는 다음과 같은 요청을 정확히 수행할 수 있는 비표준 CSS 의사 클래스를 지원하고 있습니다.
/* for display purposes so you can see the empty cell */
td { min-width:64px; }
img:-moz-broken { display:none; }
img[src="error"]:-moz-broken { display:initial; } /* for demo purposes */<table border="1"><tr><td>
<img src="error">
</td><td>
<img src="error" alt="error image">
</td><td>
<img src="error" alt="">
</td><td>
<img src="broken" alt="broken image">
</td><td>
<img src="broken" alt="">
</td><td>
<img src="https://i.stack.imgur.com/Mkdgc.png"
alt="A bird" style="width: 120px">
</td></tr></table>이 예제에는 여러 개의 셀이 있습니다.왼쪽에서 오른쪽으로:
- 없는 깨진
alt: 이미지성 보여주기 ) :: - 와 함께 이미지.
alte) : alt texte - 과 이미지
alttext e): alt text시 (nothing) - 와 함께 이미지.
alt의 CSS):: - 과 이미지
alttext 의 CSS): show alt text (nothing) - 에 을 수 있습니다.
altimage 의 CSS):
img::before (스 64요.) 만)img::after그래서 이것은 신뢰할 수 없습니다).Chrome 71에서 작동할 수 있는 것들이 없습니다.
은 입니다를 입니다.alt="" 파이어폭스 전용 CSS를 사용할 수 있습니다.
이미지가 에 유의하십시오.alt속성으로 인해 깨진 이미지 아이콘이 억제되지는 않지만 Firefox 103 및 Chrome 103에서의 동작인 것 같습니다.는 화면 가 빈할 수 됩니다.alt텍스트는 시각장애 사용자의 경험에 방해가 될 수 있습니다.
개체 태그를 사용합니다.다음과 같이 태그 사이에 대체 텍스트를 추가합니다.
<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>
http://www.w3schools.com/tags/tag_object.asp
CSS 솔루션으로 이 경로를 따를 수 있습니다.
img {
width:200px;
height:200px;
position:relative
}
img:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
background: #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder') no-repeat center;
color: transparent;
}<img src="gdfgd.jpg">결측 영상은 아무 것도 표시하지 않거나 원본을 찾을 수 없을 때 [?] 스타일 상자를 표시합니다.그 대신, 뭔가 잘못되었다는 시각적 피드백을 더 잘 받기 위해 확실히 존재하는 "실종 이미지" 그래픽으로 교체할 수도 있습니다.아니면 완전히 숨기고 싶을 수도 있습니다.이는 브라우저에서 찾을 수 없는 이미지가 우리가 볼 수 있는 "오류" 자바스크립트 이벤트를 유발하기 때문에 가능합니다.
//Replace source
$('img').error(function(){
$(this).attr('src', 'missing.png');
});
//Or, hide them
$("img").error(function(){
$(this).hide();
});
또한 이런 경우 사이트 관리자에게 이메일을 보내기 위해 Ajax 액션을 트리거할 수도 있습니다.
의 .img::after좋은 일이지만 최소한 두 가지 단점이 있습니다.
- 일부 브라우저에서 지원되지 않음(예: Edge https://codepen.io/dsheiko/pen/VgYErm) 에서 작동하지 않음)
- 단순히 이미지를 숨길 수는 없지만, 이미지를 덮을 수는 있습니다. 따라서 이 경우 기본 이미지를 표시할 때는 그다지 도움이 되지 않습니다.
자바스크립트가 없는 범용 솔루션은 알 수 없지만 Firefox에 대해서만 좋은 솔루션이 있습니다.
img:-moz-broken{
opacity: 0;
}
edit: 질문한 문제를 실제로 해결하지는 않지만 그래도 유용할 수 있습니다.
SASS/SCSS로 한 작업입니다.다음 믹스를 포함하는 유틸리티 scss 파일이 있습니다.
@mixin fallback() {
background-image: url('/assets/imgs/fallback.png');
background-size: cover;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
}
에서의 ..scss
img {
// ...
@include fallback();
}
이미지가 깨지는 것을 방지하기 위해 전후를 스타일로 사용할 수 있습니다.
<img src="Error.src">
img:before {
content: url("image.jpg");
}
img:after {
content: "(url: " attr(src) ")";
}
이 경우 src의 이미지가 깨지면 이전 컨텐츠를 사용하고 오류가 없으면 src를 사용합니다.
저는 다른 사람들의 대답을 토대로 할 겁니다.중요한 스타일링을 할 수 있는 태그를 숨기는 대신 더미 이미지를 입력합니다.
<img src="nonexistent.png" onerror="this.src=`data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'></svg>`;"/>
이론적으로:
엄밀하게 "css only", 우리는 깨끗한 선택권이 없습니다.다른 답변을 보세요. 추가할 내용이 없습니다.
실제:
오류 이벤트에 대한 클래스를 추가하는 것이 가장 좋은 방법이라고 생각합니다.제 말은 이렇습니다. 그리고 거의 이와 같은 대답이 있었습니다. 원칙은 같고, 스타일 선언을 직접 추가하지 않으면 더 우아해집니다.대신 나중에 대상이 될 수 있는 클래스를 추가합니다.
<img src="..." onerror="this.classList.add('notfound')">
그리고 이제 당신은 그것을 사용해서 그 지옥을 연출할 수 있습니다.img.notfound선택자로서 이 할 수 . 에는 아무런 도 주지 모든 이미지에 이 작은 조각을 추가하는 것을 습관화할 수 있습니다. 스타일링을 하기 전에는 아무런 상처도 주지 않습니다.
참고로, 누군가가 "이것은 CSS 전용 해결책이 아닙니다"라고 말하기 전에: 네, 감사합니다 선장님, 정말 그렇지 않습니다.저는 단지 정확한 표현만을 보는 것이 아니라, 많은 사람들이 가질 수 있는 문제인, 문제 자체를 도우려고 노력하고 있습니다.
이것은 오래된 질문이지만 여기 효과가 있는 것이 있습니다. 여기서 주요 트릭은 내가 사용하는 비율만 사용하는 이미지에 고정된 높이와 너비를 설정하지 않습니다.
.example {
background-color: #e7e7e7;
padding: 25px;
}
.image-box {
height: 50px;
width: 50px;
border-radius: 8px;
background-color: rgb(241, 255, 255);
color: rgb(241, 245, 249);
overflow: hidden;
display: block;
position: relative;
}
.image {
display: block;
max-width: 100%;
height: 100%;
object-fit: cover;
}<div class="example">
<span class="image-box">
<img class="image" src="/broken.jpeg" alt>
</span>
</div>깨진 이미지를 숨기는 각진 방법.
html 파일 안에
<img *ngIf="showImage" [src]="url" (error)="showImage = false">
내부 Ts 파일
public showImage = true;
이미지 alt를 이것으로 숨기기
img {
color: transparent;
}
코드가 필요하지 않은 기본적이고 매우 간단한 방법은 빈 alt 문을 제공하는 것입니다.그러면 브라우저가 이미지를 빈 이미지로 반환합니다.이미지가 없는 것처럼 보일 것입니다.
예:
<img class="img_gal" alt="" src="awesome.jpg">
한번 해보세요!;)
미래의 구글러들을 위해 2016년에는 속성 선택기를 사용하여 빈 이미지를 숨기는 브라우저 안전한 순수 CSS 방법이 있습니다.
img[src="Error.src"] {
display: none;
}
편집: 나는 돌아왔다 - 미래의 구글러들을 위해, 2019년에 섀도우 돔에서 실제 알트 텍스트와 알트 텍스트 이미지를 스타일링하는 방법이 있지만, 그것은 개발자 도구에서만 작동합니다.사용할 수 없습니다.미안하다.너무 좋을 것 같아요.
#alttext-container {
opacity: 0;
}
#alttext-image {
opacity: 0;
}
#alttext {
opacity: 0;
}
언급URL : https://stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html
'programing' 카테고리의 다른 글
| 여러 데이터베이스를 한 번에 조회 (0) | 2023.09.25 |
|---|---|
| Pandas DataFrame 적용() 모든 코어 사용? (0) | 2023.09.25 |
| 새 데이터베이스 서버로 마이그레이션됨. 동일한 쿼리가 매우 느림 (0) | 2023.09.25 |
| Qt5.11.2, iMAC 상의 QSql 데이터베이스 및 MariaDB (0) | 2023.09.25 |
| 스레드에서 생성된 개체는 동일한 스레드에서만 사용할 수 있습니다. (0) | 2023.09.25 |