Cách hợp lệ để bao gồm một hình ảnh không có src là gì?

Tôi có một hình ảnh mà tôi sẽ tự động điền vào một src sau bằng javascript nhưng để dễ dàng, tôi muốn thẻ hình ảnh tồn tại khi tải trang nhưng không hiển thị gì cả. Tôi biết <img src='' />là không hợp lệ, vậy cách tốt nhất để làm điều này là gì?

Mặc dù không có cách nào hợp lệ để bỏ qua nguồn hình ảnh, nhưng có những nguồn không gây ra sự cố máy chủ. Gần đây tôi có một vấn đề tương tự với iframes và xác định //:0là lựa chọn tốt nhất. Không, thực sự!

Bắt đầu với //(bỏ giao thức) làm cho giao thức của trang hiện tại được sử dụng, ngăn cảnh báo "nội dung không an toàn" trong các trang HTTPS. Bỏ qua tên máy chủ là không cần thiết, nhưng làm cho nó ngắn hơn. Cuối cùng, một cổng :0đảm bảo rằng yêu cầu máy chủ không thể được thực hiện (đó không phải là một cổng hợp lệ, theo thông số kỹ thuật).

Đây là URL duy nhất mà tôi tìm thấy gây ra không có lần truy cập máy chủ hoặc thông báo lỗi trong bất kỳ trình duyệt nào. Lựa chọn thông thường - javascript:void(0)- sẽ gây ra cảnh báo "nội dung không an toàn" trong IE7 nếu được sử dụng trên một trang được phân phối qua HTTPS. Bất kỳ cổng nào khác gây ra kết nối máy chủ đã cố gắng, ngay cả đối với các địa chỉ không hợp lệ. (Một số trình duyệt chỉ đơn giản là thực hiện yêu cầu không hợp lệ và chờ chúng hết thời gian.)

Điều này đã được thử nghiệm trong Chrome, Safari 5, FF 3.6 và IE 6/7/8, nhưng tôi hy vọng nó sẽ hoạt động trong bất kỳ trình duyệt nào, vì nó sẽ là lớp mạng giết chết mọi yêu cầu đã thử.

Một lựa chọn khác là nhúng một hình ảnh trống. Bất kỳ hình ảnh nào phù hợp với mục đích của bạn sẽ làm, nhưng ví dụ sau đây mã hóa một GIF chỉ có 26 byte - từ http://probossibleprogramming.com/2009/03/15/the-tiniest-gif-ever

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

Chỉnh sửa dựa trên nhận xét bên dưới:

Tất nhiên, bạn phải xem xét các yêu cầu hỗ trợ trình duyệt của bạn. Không có hỗ trợ cho IE7 hoặc ít hơn là đáng chú ý. http://caniuse.com/datauri

Ngày nay, IMHO cách ngắn gọn, lành mạnh và hợp lệ nhất cho một img src trống là như thế này:

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

Ví dụ thứ hai hiển thị "Văn bản thay thế" (cộng với biểu tượng hình ảnh bị hỏng trong Chrome và IE).

"data:,"là một URI hợp lệ. Một loại phương tiện truyền thông trống mặc định text/plain. Vì vậy, nó đại diện cho một tệp văn bản trống và tương đương với"data:text/plain,"

Tôi khuyên bạn nên tự động thêm các phần tử và nếu sử dụng jQuery hoặc thư viện JavaScript khác, điều này khá đơn giản:

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

cũng nhìn vào prependvà append. Mặt khác, nếu bạn có một thẻ hình ảnh như thế và bạn muốn xác thực nó, thì bạn có thể cân nhắc sử dụng một hình ảnh giả, chẳng hạn như gif trong suốt 1px hoặc png.

Tôi đã không làm điều này trong một thời gian, nhưng tôi đã phải trải qua điều tương tự một lần.

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

Là sở thích của tôi - điều này //:0ngụ ý rằng bạn sẽ cố gắng tạo kết nối HTTP / HTTPS đến máy chủ gốc trên cổng số 0 (cổng tcpmux?) - có thể vô hại, nhưng tôi không muốn làm gì cả. Heck, trình duyệt có thể thấy cổng số 0 và thậm chí không gửi yêu cầu. Nhưng tôi vẫn muốn nói rằng nó không được chỉ định theo cách đó khi đó có lẽ không phải là ý bạn.

Dù sao, việc kết xuất about:blankthực sự rất nhanh trong tất cả các trình duyệt mà tôi đã thử nghiệm. Tôi vừa ném nó vào trình xác nhận W3C và nó không phàn nàn, vì vậy nó thậm chí có thể hợp lệ.

Chỉnh sửa : Đừng làm điều đó; nó không hoạt động trên tất cả các trình duyệt (nó sẽ hiển thị biểu tượng 'hình ảnh bị hỏng' như được chỉ ra trong các nhận xét cho câu trả lời này). Sử dụng <img src='data:...giải pháp dưới đây. Hoặc nếu bạn không quan tâm đến tính hợp lệ, nhưng vẫn muốn tránh các yêu cầu không cần thiết đến máy chủ của mình, bạn có thể thực hiện <img alt="" />mà không có thuộc tính src. Nhưng đó là HÓA ĐƠN HTML vì vậy hãy chọn nó một cách cẩn thận.

Trang thử nghiệm hiển thị một loạt các phương thức khác nhau: http://desk.nu/blank_image.php - được phục vụ với tất cả các loại tài liệu và loại nội dung khác nhau. - như được đề cập trong các bình luận bên dưới, hãy sử dụng trang thử nghiệm mới của Mark Ormston tại: http://memso.com/Test/BlankImage.html

Như đã viết trong bình luận, phương pháp này là sai.

Tôi đã không tìm thấy câu trả lời này trước đây, nhưng theo thẻ trống hợp lệ của Thông số W3src sẽ là một liên kết neo #.

Ví dụ: src="#",src="#empty"

Trang xác nhận thành công và không có yêu cầu thêm được thực hiện.

Tôi thấy rằng chỉ cần đặt src thành một chuỗi trống và thêm quy tắc vào CSS của bạn để ẩn biểu tượng hình ảnh bị hỏng hoạt động tốt.

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

Nếu bạn giữ thuộc tính src, trình duyệt trống sẽ gửi yêu cầu tới url trang hiện tại, luôn thêm img 1 * 1 trong suốt thuộc tính src nếu không muốn bất kỳ url nào

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

Tôi đã thấy rằng sử dụng:

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

sẽ không đưa ra yêu cầu và xác nhận chính xác.

Các trình duyệt sẽ chỉ chặn quyền truy cập vào hệ thống tệp cục bộ.

Nhưng có thể có lỗi hiển thị trong nhật ký bảng điều khiển trong Chrome chẳng hạn:

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

Sử dụng một SVG thực sự trống, hợp lệ và tương thích cao, dựa trên bài viết này :

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

Nó sẽ mặc định có kích thước tới 300x150px như bất kỳ SVG nào, nhưng bạn có thể làm việc với nó theo imgkiểu mặc định phần tử của mình , như bạn có thể cần trong mọi trường hợp trong triển khai thực tế.

Dựa trên câu trả lời của Ben Blank, cách duy nhất mà tôi có được điều này để xác thực trong trình xác nhận w3 là như vậy:

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

Cá nhân tôi sử dụng about:blank srcvà xử lý biểu tượng hình ảnh bị hỏng bằng cách đặt độ mờ của imgphần tử thành 0.

<img src="invis.gif" />

Trong đó invis.gif là một gif trong suốt pixel. Điều này sẽ không phá vỡ trong các phiên bản trình duyệt trong tương lai và đã hoạt động trong các trình duyệt cũ từ những năm 90.

png cũng hoạt động nhưng trong các thử nghiệm của tôi, gif là 43 byte và png là 167 byte nên gif đã thắng.

ps đừng quên thẻ alt, trình xác nhận cũng giống như chúng.

Đơn giản, như thế này:

<img id="give_me_src"/>