Cách tốt nhất để hiển thị hình ảnh mặc định nếu không tìm thấy tệp hình ảnh được chỉ định?

Question

Tôi có ứng dụng Thương mại điện tử trung bình, tôi lưu trữ ITEM_IMAGE_NAME trong cơ sở dữ liệu và đôi khi người quản lý MISSPELL tên hình ảnh.

Để tránh "thiếu hình ảnh" (màu đỏ X trong IE), mỗi khi tôi hiển thị danh sách sản phẩm, tôi kiểm tra máy chủ để tìm hình ảnh liên quan đến sản phẩm và nếu tệp đó không tồn tại - tôi thay thế với hình ảnh mặc định.

Theo như tôi có thể nói điều này không ảnh hưởng đến hiệu suất, nhưng tôi đã tự hỏi nếu có bất kỳ lựa chọn thay thế nào để khắc phục vấn đề "thiếu hình ảnh".

Tôi đang sử dụng ASP.NET + C# (.NET 3,5)

Một số mã:

foreach (Item item in Items) 
{ 
    string path = Path.Combine("~/images/", item.categoryImage); 
    item.categoryImage = File.Exists(Server.MapPath(path)) ? item.categoryImage : GetImageDependingOnItemType(); 
} 

Answer 1

Bạn có thể xem xét một cái gì đó với javascript

<img src="image.jpg" onerror="this.onerror=null;this.src='default.jpg'"> 

Chỉnh sửa: Hoặc chương trình một 404.aspx trả về một hình ảnh mặc định, nếu một hình ảnh không tồn tại được yêu cầu.

Answer 2

Bạn có thể chỉ định trên máy chủ hình ảnh nào sẽ được trả lại cho tất cả các yêu cầu đối với các tệp hình ảnh không tồn tại. Bằng cách đó người dùng có thể nhận được một "2 AWESUM 2 SHO" lolcat thay vì một x màu đỏ.

Answer 3

Tôi nghĩ rằng cách của bạn khá ổn. Tôi sẽ làm điều đó trong một chức năng hoặc làm trong .categoryImage accessor.

Answer 4

Tôi nghĩ rằng tôi sẽ tìm cách làm cho dữ liệu nhất quán hơn là cho phép người dùng nhập dữ liệu không phù hợp. Có lẽ ứng dụng quản lý của bạn có thể cho phép người quản lý chọn hình ảnh hiện có hoặc tải lên hình ảnh mới, sau đó đặt tên hình ảnh dựa trên đầu vào này để bạn yên tâm rằng hình ảnh sẽ tồn tại. Chỉ xóa một hình ảnh khi tất cả các tham chiếu đến nó đã bị xóa khỏi cơ sở dữ liệu. Hạn chế tương tác với dữ liệu vào ứng dụng của bạn để mọi người không thể phạm sai lầm đó.

Một cách khác để xử lý việc này là có trình xử lý (hoặc bộ điều khiển trong ASP.NET MVC) thực hiện tra cứu hình ảnh dựa trên id và trả về dữ liệu hình ảnh. Cùng với bộ nhớ đệm này có thể rất hiệu quả và sẽ cho phép bạn thay thế hình ảnh.

Answer 5

<style> 
    .fallback { background-image: url("fallback.png"); } 
</style> 

<img class="fallback" src="missing.png" width="400" height="300"> 

Nếu missing.png tải, nó sẽ bao gồm không gian được phân bổ cho nó, như thể dự phòng không được chỉ định. (Giả sử nó không minh bạch.)

Nếu missing.png không tải được, thay vào đó, không gian sẽ được lấp đầy với fallback.png. Bạn vẫn sẽ nhận được một biểu tượng "hình ảnh bị hỏng" nhỏ, nhưng tôi thích nó theo cách đó ... một gợi ý nhỏ nói rằng "sửa chữa tôi".

Nếu hình ảnh của bạn không có cùng kích thước, bạn sẽ nhận thấy rằng các ô nền theo mặc định. Bạn có thể sử dụng background-repeat: no-repeat; nếu bạn không thích điều đó.

Answer 6

Tôi thích giải pháp của Erik, nhưng không xóa sự kiện sau lần thực hiện đầu tiên, bởi vì nếu bạn đang sử dụng mã đó, hãy nói, xem một phần MVC, điều này sẽ chỉ hoạt động lần đầu tiên được tải.Vì vậy, tôi muốn đi với:

<img src="image.jpg" onerror="this.src='default.jpg';" /> 

Trong trường hợp bạn có nhiều hình ảnh trong tình cảnh tương tự, như một mạng lưới, bạn có thể làm điều này thay vì:

$("img").on("error", function() { 
    $(this).attr('src', 'default.jpg'); 
}); 

Tất nhiên, bạn có thể muốn sử dụng bộ chọn jQuery cụ thể hơn.