it-swarm.dev

كيفية إخفاء أيقونة الصورة المكسورة باستخدام CSS/HTML فقط (بدون js)

كيف يمكنني إخفاء أيقونة الصورة المعطلة؟ مثال Example

لدي صورة بها خطأ src:

<img src="Error.src"/>

يجب أن يعمل الحل في جميع المتصفحات.

باستخدام CSS أو HTML فقط ، وليس JS.

142
Geray Suinov

لا توجد طريقة لمعرفة CSS/HTML لمعرفة ما إذا كانت الصورة مقطوعة ، لذلك سيتعين عليك استخدام JavaScript بصرف النظر عن

ولكن فيما يلي طريقة بسيطة لإخفاء الصورة أو استبدال المصدر بنسخة احتياطية.

<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 أدناه. لا يمكنك إخفاء الصورة بأكملها ، لكن يمكنك تغيير شكل الرمز المعطل.

223
Kevin Jantzer

على الرغم من ما يقوله الناس هنا ، لا تحتاج إلى جافا سكريبت على الإطلاق ، حتى أنك لا تحتاج إلى CSS !!

انها في الواقع قابلة للتنفيذ وبسيطة للغاية مع HTML فقط. يمكنك حتى إظهار صورة افتراضية إذا لم يتم تحميل صورة . إليك الطريقة...

يعمل هذا أيضًا على جميع المتصفحات ، حتى فيما مضى على IE8 (من بين أكثر من 250،000 زائر للمواقع التي استضافتها في سبتمبر 2015 ،ZEROاستخدم الأشخاص شيئًا أسوأ من IE8 ، مما يعني أن هذا الحل يعمل من أجل حرفيا كل شيء ).

الخطوة 1: قم بالإشارة إلى الصورة كـ كائن بدلاً من img . عندما تفشل الكائنات فإنها لا تظهر الرموز المكسورة ؛ إنهم لا يفعلون شيئًا. بدءًا من IE8 ، يمكنك استخدام علامات الكائن و Img بالتبادل. يمكنك تغيير حجم والقيام بكل الأشياء المجيدة التي يمكنك مع الصور العادية أيضا. لا تخف من علامة الكائن ؛ إنها مجرد علامة ، لا يتم تحميل أي شيء كبير الحجم ولا يتم إبطاء أي شيء. عليك فقط استخدام علامة img باسم آخر. اختبار السرعة يدل على أنها تستخدم متطابقة.

الخطوة 2: (اختياري ، ولكن رائع) عصا صورة افتراضية داخل هذا الكائن. إذا تم تحميل الصورة التي تريدها بالفعل {في الكائن ، فلن تظهر الصورة الافتراضية. لذلك ، على سبيل المثال ، يمكنك عرض قائمة بأفاتار المستخدم ، وإذا لم يكن لدى شخص ما صورة على الخادم حتى الآن ، فيمكنه إظهار صورة العنصر النائب ... لا يلزم وجود جافا سكريبت أو CSS على الإطلاق ، ولكن يمكنك الحصول على ميزات ما يأخذ معظم الناس جافا سكريبت.

هنا هو الرمز ...

<object data="avatar.jpg" type="image/jpg">
    <img src="default.jpg" />
</object>

... نعم ، الأمر بهذه البساطة.

إذا كنت تريد تنفيذ الصور الافتراضية باستخدام CSS ، يمكنك جعلها أكثر بساطة في HTML الخاص بك مثل هذا ...

<object class="avatar" data="user21.jpg" type="image/jpg"></object>

... وما عليك سوى إضافة CSS من هذه الإجابة -> https://stackoverflow.com/a/32928240/3196360

119
Nick Steele

العثور على حل كبير في 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">
55
michalzuber

أعتقد أن أسهل طريقة هي إخفاء رمز الصورة المعطلة بواسطة خاصية المسافة البادئة للنص.

img {
    text-indent: -10000px
}

من الواضح أنها لا تعمل إذا كنت تريد رؤية السمة "alt".

16
Burnee

في حالة رغبتك في الاحتفاظ/الحاجة للصورة كعنصر نائب ، يمكنك تغيير درجة التعتيم إلى 0 باستخدام onerror وبعض المغلق لتعيين حجم الصورة. بهذه الطريقة لن ترى الرابط المعطّل ، لكن يتم تحميل الصفحة بشكل طبيعي.

<img src="<your-image-link->" onerror="this.style.opacity='0'" />

.img {
    width: 75px;
    height: 100px;
}
14
Ewald Bos

أعجبتني answer by Nick وكنت ألعب مع هذا الحل. وجدت طريقة أنظف. نظرًا لأن :: before/:: after لا تعمل العناصر المزيفة على العناصر المستبدلة مثل img والكائن ، فإنها لن تعمل إلا إذا لم يتم تحميل بيانات الكائن (src). يحافظ على HTML أكثر نظافة وسيضيف فقط الزائفة إذا فشل تحميل الكائن.

http://codepen.io/anon/pen/xwqJKQ

<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object>

<object data="http://broken.img/url" type="image/png"></object>

object {
  position: relative;
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  border: 1px solid black;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background: red url('http://placehold.it/200x200');
  }
}
13
Bartezz

يعد استخدام CSS صعبًا ، ولكن يمكنك استخدام background-image في CSS بدلاً من علامات <img> ...

شيء من هذا القبيل:

HTML

<div id="image"></div>

CSS

#image {
    background-image: url(Error.src);
    width: //width of image;
    height: //height of image;

}

هنا هو العمل كمان .

ملاحظة: لقد أضفت الحد الأقصى في CSS على الكمان فقط لإظهار مكان الصورة.

7
Dryden Long

إذا كنت لا تزال بحاجة إلى إظهار حاوية الصورة نظرًا لتعبئتها لاحقًا وعدم رغبتك في إظهارها وإخفائها ، يمكنك لصق صورة شفافة 1 × 1 داخل src:

<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

أنا استخدم هذا لهذا الغرض بالضبط. كان لدي حاوية صور كانت ستحمل صورة عبر Ajax. نظرًا لأن الصورة كانت كبيرة واستغرق تحميلها قليلاً ، فقد تطلب الأمر تعيين صورة خلفية في CSS لشريط تحميل Gif.

ومع ذلك ، نظرًا لأن src الخاص بـ "فارغ" ، لا يزال رمز الصورة المكسور يظهر في المستعرضات التي تستخدمه.

يؤدي إعداد Gif الشفاف 1 × 1 إلى حل هذه المشكلة ببساطة وفعالية مع عدم وجود إضافات التعليمات البرمجية من خلال CSS أو JavaScript.

6
user2596313

استخدم علامة الكائن. أضف نصًا بديلًا بين العلامات مثل هذا:

<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>

http://www.w3schools.com/tags/tag_object.asp

3
ThomasAFink

الصور المفقودة إما ستعرض فقط شيئًا ، أو تعرض [؟ ] مربع النمط عندما لا يمكن العثور على مصدرها. بدلاً من ذلك ، قد ترغب في استبدال ذلك برسم "الصورة المفقودة" الذي أنت متأكد من وجوده ، لذلك هناك ملاحظات مرئية أفضل تفيد بوجود خطأ ما. أو قد ترغب في إخفائه تمامًا. هذا ممكن ، لأن الصور التي يتعذر على المتصفح العثور عليها تنطلق من حدث "خطأ" في JavaScript يمكننا مشاهدته.

    //Replace source
    $('img').error(function(){
            $(this).attr('src', 'missing.png');
    });

   //Or, hide them
   $("img").error(function(){
           $(this).hide();
   });

بالإضافة إلى ذلك ، قد ترغب في تشغيل نوع من إجراء Ajax لإرسال رسالة بريد إلكتروني إلى مسؤول الموقع عند حدوث ذلك.

2
Ali panahiyan

يمكنك اتباع هذا المسار كحل المغلق

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">
2
Cenk YAGMUR

منذ 2005 ، دعمت متصفحات Mozilla مثل Firefox الفئة الزائفة غير القياسية :-moz-broken CSS التي يمكنها تنفيذ هذا الطلب بالضبط:

td {
  min-width:64px; /* for display purposes so you can see the empty cell */
}

img[alt]:-moz-broken {
  display:none;
}
<table border="1"><tr><td>
  <img src="error">
</td><td>
  <img src="broken" alt="A broken image">
</td><td>
  <img src="https://images-na.ssl-images-Amazon.com/images/I/218eLEn0fuL.png"
       alt="A bird" style="width: 120px">
</td></tr></table>

يعمل img[alt]::before أيضًا في Firefox 64 (على الرغم من أنه كان في المرة الواحدة img[alt]::after لذلك هذا غير موثوق به). لا يمكنني الحصول على أيٍّ منهما للعمل في Chrome 71.

1
Adam Katz

تعتبر الحيلة التي تحتوي على img::after من الأشياء الجيدة ، ولكنها تحتوي على سلبيين على الأقل:

  1. غير مدعوم من قبل جميع المتصفحات (على سبيل المثال لا يعمل على Edge https://codepen.io/dsheiko/pen/VgYErm )
  2. لا يمكنك ببساطة إخفاء الصورة ، بل تغطيتها - حتى لا يكون ذلك مفيدًا عند عرض صورة افتراضية في الحالة

لا أعرف حلاً عالميًا بدون جافا سكريبت ، ولكن بالنسبة إلى Firefox هناك حل لطيف:

img:-moz-broken{
  opacity: 0;
}
0
Dmitry Sheiko

إذا قمت بإضافة alt مع text alt = "abc" فسيظهر العرض المصغر الفاسد ، و alt message abc

<img src="pic_trulli.jpg" alt="abc"/>

 1st 

إذا لم تقم بإضافة بديل ، فسيظهر العرض المصغر التالف

<img src="pic_trulli.jpg"/>

 2nd 

إذا كنت تريد إخفاء الصورة المعطلة ، فقط أضف alt = "" لن تظهر الصورة المصغرة التالفة وأي رسالة بديل (بدون استخدام js)

<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'"/>

النقطة الرابعة خطرة قليلاً (ليس بالضبط) ، إذا كنت ترغب في إضافة أي صورة في حدث onerror ، فلن يتم عرضها حتى في حالة وجود صورة

الرابط https://jsfiddle.net/02d9yshw/

0
P Satish Patro