HTML หากไม่พบรูปภาพ

ฉันมีรูปภาพในหน้า HTML:

<img src="smiley.gif" alt="Smiley face" width="32" height="32" />

หากไม่พบรูปภาพบนเซิร์ฟเวอร์จะแสดงสี่เหลี่ยมเปล่าที่น่าเกลียด

ฉันต้องการทำให้มันเป็นเช่นนั้นหากไม่พบรูปภาพมันจะไม่แสดงอะไรเลยหรือรูปภาพเริ่มต้นอื่น ๆ ที่ฉันรู้ว่าอยู่บนเซิร์ฟเวอร์อย่างแน่นอน

จะทำได้อย่างไร?

วิธีที่ดีที่สุดในการแก้ปัญหาของคุณ:

<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.src='Default.jpg'" alt="" width="100" height="120">

onerror เป็นสิ่งที่ดีสำหรับคุณ :)

แค่เปลี่ยนชื่อไฟล์ภาพแล้วลองเอง

ลองดูสิ

  <object data="URL_TO_Default_img.png" type="image/png">
   <img src="your_original_image.png" />
  </object>

สิ่งนี้ได้ผลสำหรับฉัน แจ้งให้เราทราบเกี่ยวกับคุณ

โอเค แต่ฉันชอบใช้วิธีนี้ดังนั้นเมื่อใดก็ตามที่ไม่มีภาพต้นฉบับคุณสามารถโหลดภาพเริ่มต้นของคุณซึ่งอาจเป็นภาพยิ้มที่คุณชื่นชอบหรือภาพที่พูดว่าขออภัย! ไม่พร้อมใช้งาน แต่ในกรณีที่ภาพทั้งสองหายไปคุณสามารถใช้ข้อความเพื่อแสดงได้ ซึ่งคุณสามารถยิ้มได้ ดูเกือบจะครอบคลุมทุกกรณี

<img src="path_to_original_img/img.png"  alt="Sorry! Image not available at this time" 
       onError="this.onerror=null;this.src='<?=base_url()?>assets1/img/default.jpg';">

ที่นี่ตรวจสอบข้อมูลโค้ดด้านล่างซึ่งในนี้ฉันสะกดชื่อภาพไม่ถูก ดังนั้นเพียงเพราะมันแสดงภาพทางเลือกเป็นภาพที่ไม่พบ (404.svg)

<img id="currentPhoto" src="https://www.ccrharrow.org/Images/content/953/741209.pg" onerror="this.src='https://www.unesale.com/ProductImages/Large/notfound.png'" alt="">

สำหรับทางเลือกอื่นหากไม่มีรูปภาพ - ไม่แสดงอะไรเลย (สิ่งที่ฉันกำลังมองหา)

คุณสามารถสลับฟังก์ชันจากคำตอบของ Robby Shaw ในแอตทริบิวต์ "onerror" เป็น "this.remove ()"

<img id="currentPhoto" src="SomeImage.jpg" alt='1' width="100" height="120">
<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.remove();" alt="2" width="100" height="120">

วิธีปกติในการจัดการสถานการณ์นี้คือการตั้งค่าaltแท็กเป็นสิ่งที่มีความหมาย

หากคุณต้องการรูปภาพเริ่มต้นแทนฉันขอแนะนำให้ใช้เทคโนโลยีฝั่งเซิร์ฟเวอร์เพื่อแสดงรูปภาพของคุณเรียกว่าใช้รูปแบบที่คล้ายกันกับ:

<img src="ImageHandler.aspx?Img=Blue.jpg" alt="I am a picture" />

ในImageHandler.aspxโค้ดให้ตรวจจับข้อผิดพลาดที่ไม่พบไฟล์และให้บริการdefault.jpgแทนคุณ

คุณสามารถแสดงข้อความแสดงแทนได้โดยเพิ่มalt:

<img src="my_img.png" alt="alternative text" border="0" /> 

ฉันเพิ่ม div พาเรนต์รอบ ๆ รูปภาพและใช้ตัวจัดการเหตุการณ์ onerror ต่อไปนี้เพื่อซ่อนรูปภาพต้นฉบับเนื่องจากใน IE ยังมีรูปภาพที่ไม่พบรูปภาพที่น่าเกลียดแสดงหลังจากใช้แอ็ตทริบิวต์ alt:

<div style=" width:300px; height:150px; float:left; margin-left:5px; margin-top:50px;">
        <img src='@Url.Content("~/Images/Logo-Left.png")' onerror="this.parentElement.innerHTML = '';" />
</div>

ลองใช้border=0ในimgแท็กเพื่อทำให้สี่เหลี่ยมที่น่าเกลียดหายไป

<img src="someimage.png" border="0" alt="some alternate text" />

ฉันต้องการซ่อนพื้นที่ที่<img>แท็กครอบครองเพื่อให้สิ่งนี้ได้ผลสำหรับฉัน

<img src = "source.jpg" alt = "" >

หากคุณต้องการรูปภาพอื่นแทนข้อความคุณสามารถใช้ php:

$file="smiley.gif";
$alt_file="alt.gif";
if(file_exist($file)){
     echo "<img src='".$file."' border="0" />";
}else if($alt_file){
     // the alternative file too might not exist not exist
     echo "<img src='".$alt_file."' border="0" />";
}else{
  echo "smily face";
}

วิธีง่ายๆในการจัดการสิ่งนี้เพียงแค่เพิ่มภาพพื้นหลัง

ลองใช้ PHP

if (file_exists('url/img/' . $Image)) {
    $show_img_URL = "Image.jpg";
} else {
    $show_img_URL = "Image_not_found.jpg";
}

มันใช้งานได้สำหรับฉันว่าหากคุณไม่ต้องการใช้แอตทริบิวต์ alt หากรูปภาพแตกคุณสามารถใช้โค้ดชิ้นนี้และตั้งค่าตามนั้น

<h1>
  <a> 
   <object data="~/img/Logo.jpg" type="image/png">
     Your Custom Text Here
   </object>
  </a>
</h1>

อันนี้ใช้ได้ผลสำหรับฉัน โดยใช้ srcset ฉันเพิ่งเรียนรู้เกี่ยวกับเรื่องนี้ดังนั้นฉันจึงไม่รู้ว่าเบราว์เซอร์รองรับหรือไม่ แต่มันใช้ได้ผลสำหรับฉัน ลองใช้แล้วให้ฟีดกลับมา

 <img src="smiley.gif" srcset="alternatve.gif" width="32" height="32" />

วิธีแก้ไข - ฉันลบองค์ประกอบความสูงและความกว้างของ img จากนั้นข้อความแสดงแทนก็ใช้งานได้

<img src="smiley.gif" alt="Smiley face" width="32" height="32" />

ถึง

<img src="smiley.gif" alt="Smiley face" />

ขอบคุณทุกคน.