วิธีที่ถูกต้องในการรวมภาพที่ไม่มี src คืออะไร?

ฉันมีภาพที่ฉันจะเติมด้วย src แบบไดนามิกในภายหลังด้วย javascript แต่เพื่อความสะดวกฉันต้องการให้แท็กภาพอยู่ที่ pageload แต่ไม่แสดงอะไรเลย ฉันรู้ว่า<img src='' />ไม่ถูกต้องดังนั้นวิธีที่ดีที่สุดในการทำเช่นนี้คืออะไร

แม้ว่าจะไม่มีวิธีที่ถูกต้องในการละเว้นแหล่งที่มาของรูปภาพ แต่ก็มีแหล่งที่มาซึ่งจะไม่ทำให้เซิร์ฟเวอร์ฮิต ฉันเพิ่งมีปัญหาที่คล้ายกันกับiframes และมุ่งมั่นที่//:0จะเป็นตัวเลือกที่ดีที่สุด ไม่มีจริงๆ!

การเริ่มต้นด้วย//(ละเว้นโพรโทคอล) ทำให้โปรโตคอลของหน้าปัจจุบันถูกใช้เพื่อป้องกันคำเตือน "เนื้อหาที่ไม่ปลอดภัย" ในหน้า HTTPS ไม่จำเป็นต้องข้ามชื่อโฮสต์ แต่ทำให้สั้นลง ในที่สุดพอร์ตของการ:0ทำให้แน่ใจว่าคำขอของเซิร์ฟเวอร์ไม่สามารถทำได้ (ไม่ใช่พอร์ตที่ถูกต้องตามสเป็ค)

นี่เป็น URL เดียวที่ฉันพบว่าไม่มีเซิร์ฟเวอร์หรือข้อความแสดงข้อผิดพลาดในเบราว์เซอร์ใด ๆ ตัวเลือกปกติ - javascript:void(0)- จะทำให้เกิดคำเตือน "เนื้อหาที่ไม่ปลอดภัย" ใน IE7 หากใช้กับหน้าเว็บที่ให้บริการผ่าน HTTPS พอร์ตอื่นใดทำให้เกิดการพยายามเชื่อมต่อเซิร์ฟเวอร์แม้จะเป็นที่อยู่ที่ไม่ถูกต้องก็ตาม (เบราว์เซอร์บางตัวจะส่งคำขอที่ไม่ถูกต้องและรอให้หมดเวลา)

นี่เป็นการทดสอบใน Chrome, Safari 5, FF 3.6 และ IE 6/7/8 แต่ฉันคาดว่ามันจะทำงานในเบราว์เซอร์ใด ๆ เพราะมันควรจะเป็นเลเยอร์เครือข่ายที่ฆ่าคำขอที่พยายามทำ

ตัวเลือกอื่นคือการฝังภาพเปล่า ภาพใด ๆ ที่เหมาะสมกับจุดประสงค์ของคุณจะทำ แต่ตัวอย่างต่อไปนี้จะเข้ารหัส GIF ที่มีขนาด 26 ไบต์เท่านั้น - จากhttp://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />

แก้ไขตามความคิดเห็นด้านล่าง:

แน่นอนคุณต้องพิจารณาข้อกำหนดการสนับสนุนเบราว์เซอร์ของคุณ ไม่มีการรองรับ IE7 หรือต่ำกว่านั้นเด่น http://caniuse.com/datauri

วันนี้ IMHO วิธีที่สั้นที่สุดมีเหตุผลและถูกต้องสำหรับ img src ที่ว่างเปล่าเป็นดังนี้:

<img src="data:," alt>
or
<img src="data:," alt="Alternative Text">

ตัวอย่างที่สองแสดง "Alternative Text" (บวกกับไอคอนแสดงความเสียหายใน Chrome และ IE)

"data:,"เป็น URI ที่ถูกต้อง text/plainที่ว่างเปล่าค่าเริ่มต้นของสื่อชนิด ดังนั้นจึงแสดงถึงไฟล์ข้อความที่ว่างเปล่าและเทียบเท่า"data:text/plain,"

ฉันขอแนะนำให้เพิ่มองค์ประกอบแบบไดนามิกและถ้าใช้ jQuery หรือห้องสมุด JavaScript อื่น ๆ มันค่อนข้างง่าย:

• http://api.jquery.com/appendTo/
• http://api.jquery.com/prependTo/
• http://api.jquery.com/html/

ยังมองและprepend appendมิฉะนั้นถ้าคุณมีแท็กรูปภาพเช่นนั้นและคุณต้องการให้มันตรวจสอบแล้วคุณอาจพิจารณาใช้ภาพจำลองเช่น gif หรือ png โปร่งใส 1px

ฉันไม่ได้ทำสิ่งนี้มาระยะหนึ่งแล้ว แต่ฉันก็ต้องทำสิ่งนี้อีกครั้ง

<img src="about:blank" alt="" />

สิ่งที่ฉันชอบคือสิ่ง//:0หนึ่งบ่งบอกว่าคุณจะพยายามเชื่อมต่อ HTTP / HTTPS กับเซิร์ฟเวอร์ต้นทางบนพอร์ตศูนย์ (พอร์ต tcpmux หรือไม่) ซึ่งอาจไม่เป็นอันตราย แต่ฉันไม่ต้องการทำอะไรเลย เฮ้เบราว์เซอร์อาจเห็นพอร์ตเป็นศูนย์และไม่ส่งคำขอ แต่ฉันก็ยังไม่ได้ระบุวิธีนั้นเมื่อนั่นอาจไม่ใช่สิ่งที่คุณหมายถึง

อย่างไรก็ตามการแสดงผลของabout:blankจริงเร็วมากในเบราว์เซอร์ทั้งหมดที่ฉันทดสอบ ฉันเพิ่งโยนมันเข้าไปในเครื่องมือตรวจสอบ W3C และมันก็ไม่ได้บ่นดังนั้นมันจึงอาจใช้ได้

แก้ไข : อย่าทำอย่างนั้น; มันใช้งานไม่ได้กับทุกเบราว์เซอร์ (มันจะแสดงไอคอน 'ภาพแตก' ตามที่ระบุไว้ในความคิดเห็นสำหรับคำตอบนี้) ใช้<img src='data:...วิธีแก้ปัญหาด้านล่าง หรือถ้าคุณไม่สนใจความถูกต้อง แต่ยังต้องการหลีกเลี่ยงการร้องขอที่ไม่จำเป็นไปยังเซิร์ฟเวอร์ของคุณคุณสามารถทำได้<img alt="" />โดยไม่ต้องใช้ src attribute แต่นั่นคือHTML ที่ไม่ถูกต้องดังนั้นโปรดเลือกอย่างระมัดระวัง

หน้าทดสอบแสดงทั้งกลุ่มของวิธีการที่แตกต่างกัน: http://desk.nu/blank_image.php - เสิร์ฟพร้อมกับประเภทของเนื้อหาและประเภทเนื้อหาที่แตกต่างกัน - ตามที่ระบุไว้ในความคิดเห็นด้านล่างใช้หน้าทดสอบใหม่ของ Mark Ormston ที่: http://memso.com/Test/BlankImage.html

ตามที่เขียนไว้ในความคิดเห็นวิธีนี้ไม่ถูกต้อง

ฉันไม่พบคำตอบนี้มาก่อน แต่กำกับการรายละเอียด W3ว่างที่ถูกต้องแท็กจะเป็นสมอลิงค์src#

ตัวอย่าง: src="#",src="#empty"

ตรวจสอบความถูกต้องของหน้าได้สำเร็จและไม่มีการร้องขอพิเศษใด ๆ

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

[src=''] {
    visibility: hidden;
}

หากคุณเก็บเบราว์เซอร์ที่ว่างเปล่า src จะส่งคำขอไปยัง URL หน้าปัจจุบันเพิ่ม 1 * 1 โปร่งใส img ในแอตทริบิวต์ src หากไม่ต้องการ URL ใด ๆ

src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="

ฉันพบว่าใช้:

<img src="file://null">

จะไม่ทำการร้องขอและตรวจสอบความถูกต้อง

เบราว์เซอร์จะบล็อกการเข้าถึงระบบไฟล์ในเครื่อง

แต่อาจมีข้อผิดพลาดปรากฏขึ้นในบันทึกของคอนโซลใน Chrome เช่น:

Not allowed to load local resource: file://null/

ใช้ SVG ที่ว่างเปล่าถูกต้องและเข้ากันได้อย่างแท้จริงโดยอ้างอิงจากบทความนี้ :

src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E"

มันจะมีขนาดเริ่มต้นที่ 300x150px เช่นเดียวกับ SVG ใด ๆ แต่คุณสามารถทำงานกับมันในimgสไตล์เริ่มต้นองค์ประกอบของคุณตามที่คุณอาจต้องการในกรณีใด ๆ ในการใช้งานจริง

การสร้างคำตอบของ Ben Blank วิธีเดียวที่ฉันได้รับสิ่งนี้เพื่อตรวจสอบในตัวตรวจสอบความถูกต้องของ w3 เป็นเช่นนั้น:

<img src="/./.:0" alt="">`

ผมเองใช้about:blank srcและจัดการกับไอคอนภาพเสียโดยการตั้งค่าความทึบขององค์ประกอบimg0

<img src="invis.gif" />

โดยที่ invis.gif เป็น gif โปร่งใสพิกเซลเดียว สิ่งนี้จะไม่แตกในเวอร์ชันของเบราว์เซอร์ในอนาคตและทำงานในเบราว์เซอร์รุ่นเก่าตั้งแต่ยุค 90

png ควรทำงานด้วย แต่ในการทดสอบของฉัน gif คือ 43 ไบต์และ png คือ 167 ไบต์ดังนั้น gif จึงชนะ

ps อย่าลืมแท็ก alt ผู้ตรวจสอบก็ชอบเหมือนกัน

ง่ายๆเช่นนี้

<img id="give_me_src"/>