Tìm hiểu lý do tại sao hình ảnh không hiển thị trên trang web của bạn và cách khắc phục chúng
Câu nói cũ nói rằng "một bức tranh trị giá một ngàn chữ". Điều này đặc biệt đúng trên Web, nơi các nhịp chú ý nổi tiếng ngắn và do đó hình ảnh phù hợp thực sự có thể tạo hoặc phá vỡ trang web bằng cách thu hút sự chú ý đúng và thu hút khách truy cập trang đủ lâu để họ tìm hiểu những gì họ cần để tìm hiểu hoặc thực hiện một hành động báo hiệu "giành chiến thắng" cho trang web. Có, khi nói đến một trang web, hình ảnh thực sự có giá trị hơn một ngàn chữ!
Vì vậy, với tầm quan trọng của hình ảnh trực tuyến được thiết lập, chúng ta hãy xem xét tiếp theo trang web của bạn nói gì nếu một hình ảnh được cho là trên trang web không tải được? Điều này có thể xảy ra cho dù bạn có hình ảnh nội tuyến là một phần của HTML hoặc hình nền được áp dụng với CSS (và trang web của bạn có thể có cả hai). Điểm mấu chốt là khi một đồ họa không tải trên một trang, nó làm cho thiết kế trông bị hỏng và, trong một số trường hợp, hoàn toàn có thể phá hủy trải nghiệm người dùng trên trang web đó. "Hàng ngàn chữ" mà hình ảnh gửi đi chắc chắn không phải là những hình ảnh tích cực!
Chúng ta hãy xem xét một số lý do phổ biến khiến hình ảnh không tải được trên trang web, cũng như những gì bạn nên lưu tâm khi khắc phục sự cố này trong khi kiểm tra trang web .
Đường dẫn tệp không chính xác
Khi bạn thêm hình ảnh vào tệp HTML hoặc CSS của trang web, bạn phải tạo đường dẫn đến vị trí trong cấu trúc thư mục của bạn nơi chứa các tệp đó. Đây là mã cho trình duyệt biết nơi tìm kiếm và tìm nạp hình ảnh từ đó. Trong hầu hết các trường hợp, điều này sẽ nằm trong thư mục có tên 'hình ảnh'. Nếu đường dẫn đến thư mục này và các tệp bên trong nó không chính xác, hình ảnh sẽ không tải đúng vì trình duyệt sẽ không thể truy xuất các tệp chính xác. Nó sẽ đi theo con đường mà bạn đã nói với nó, nhưng nó sẽ chạm vào một ngõ cụt và thay vì hiển thị hình ảnh thích hợp, nó sẽ trống rỗng.
Bước 1 trong việc gỡ lỗi các vấn đề tải hình ảnh là đảm bảo rằng đường dẫn tệp bạn đã mã hóa là chính xác. Có lẽ bạn đã chỉ định thư mục sai hoặc không liệt kê đúng đường dẫn đến thư mục đó. Nếu đây không phải là trường hợp, bạn có thể có một vấn đề khác với đường dẫn đó. Đọc tiếp!
Tên tệp sai chính tả
Khi bạn kiểm tra đường dẫn tệp cho tệp của mình, hãy đảm bảo rằng bạn đã đánh vần tên của hình ảnh một cách chính xác. Theo kinh nghiệm của chúng tôi, tên không chính xác hoặc lỗi chính tả là nguyên nhân phổ biến nhất gây ra sự cố tải hình ảnh. Hãy nhớ rằng, trình duyệt web rất khó chịu khi nói đến tên tệp. Nếu bạn quên một lá thư do nhầm lẫn hoặc sử dụng chữ cái sai, trình duyệt sẽ không tìm kiếm một tệp tương tự và nói, "ồ, bạn có thể có nghĩa là cái này, đúng không?" Không - nếu tệp bị viết sai chính tả, ngay cả khi tệp được đóng, nó sẽ không tải trên trang.
Mở rộng tệp sai
Trong một số trường hợp, bạn có thể có tên của tệp được viết đúng chính tả, nhưng phần mở rộng của tệp có thể không chính xác. Nếu hình ảnh của bạn là tệp .jpg , nhưng HTML của bạn đang tìm kiếm tệp .png, sẽ có sự cố. Đảm bảo bạn đang sử dụng đúng loại tệp cho mỗi hình ảnh và sau đó đảm bảo bạn đã gọi cho cùng một tiện ích mở rộng đó trong mã của trang web của bạn.
Ngoài ra tìm kiếm trường hợp nhạy cảm. Nếu tệp của bạn kết thúc bằng .JPG, với các chữ cái viết hoa, nhưng mã của bạn tham chiếu .jpg, tất cả chữ thường, có một số máy chủ web sẽ thấy hai máy chủ này khác nhau, mặc dù chúng là cùng một bộ chữ cái. Trường hợp độ nhạy đếm! Đây là lý do tại sao chúng tôi luôn lưu các tệp của mình bằng tất cả các chữ thường. Làm như vậy cho phép chúng tôi luôn sử dụng chữ thường trong mã của chúng tôi, loại bỏ một vấn đề có thể xảy ra mà chúng tôi có thể có với tệp hình ảnh của chúng tôi.
Tệp bị thiếu
Nếu đường dẫn đến tệp hình ảnh của bạn là chính xác và tên và phần mở rộng tệp cũng không có lỗi, mục tiếp theo cần kiểm tra là đảm bảo rằng các tệp đã thực sự được tải lên máy chủ web. Bỏ qua việc tải tệp lên máy chủ đó khi một trang web được khởi chạy là một lỗi phổ biến dễ bị bỏ qua.
Bạn khắc phục vấn đề này như thế nào? Tải lên những hình ảnh đó, làm mới trang web của bạn và nó sẽ ngay lập tức hiển thị các tệp như mong đợi. Bạn cũng có thể thử xóa hình ảnh trên máy chủ và tải lên lại. Nó có vẻ lạ, nhưng chúng tôi đã thấy công việc này nhiều lần. Đôi khi các tệp bị hỏng, vì vậy phương pháp "xóa và thay thế" này có thể giúp bạn.
Website Hosting hình ảnh là xuống
Bạn thường sẽ muốn lưu trữ bất kỳ hình ảnh nào mà trang web của bạn sử dụng trên máy chủ của riêng bạn, nhưng trong một số trường hợp, bạn có thể đang sử dụng hình ảnh được lưu trữ ở nơi khác. Nếu trang web lưu trữ hình ảnh đó bị hỏng, hình ảnh của bạn sẽ không tải.
Chuyển vấn đề
Cho dù tệp hình ảnh được tải từ miền bên ngoài hay từ tệp riêng của bạn, luôn có khả năng xảy ra sự cố chuyển cho tệp đó khi trình duyệt đó yêu cầu lần đầu tiên. Đây không phải là một sự xuất hiện phổ biến (nếu có, bạn có thể cần phải tìm kiếm một nhà cung cấp dịch vụ lưu trữ mới ), nhưng nó có thể xảy ra theo thời gian.
Mặt không may của vấn đề này là có thực sự là không có gì bạn có thể làm gì về nó vì nó là một vấn đề ngoài tầm kiểm soát của bạn. Tin tốt là nó là một vấn đề tạm thời thường được giải quyết khá nhanh chóng. Ví dụ, khi ai đó nhìn thấy một trang bị hỏng và làm mới nó, chỉ riêng việc đó sẽ thường khắc phục sự cố và tải hình ảnh đúng cách. Nếu bạn nhìn thấy một hình ảnh bị hỏng, hãy làm mới trình duyệt để xem có lẽ đó chỉ là sự cố truyền trên yêu cầu ban đầu của bạn.
Một vài lưu ý cuối cùng
Khi suy nghĩ về hình ảnh và tải mối quan tâm, hai điều cũng phải được lưu tâm là việc sử dụng thích hợp các thẻ ALT và tốc độ trang web của bạn và hiệu suất tổng thể.
ALT, hoặc "văn bản thay thế", thẻ là những gì được hiển thị bởi trình duyệt nếu hình ảnh không tải được. Họ cũng là một thành phần quan trọng trong việc tạo ra các trang web có thể truy cập có thể được sử dụng bởi những người có khuyết tật nhất định. Mỗi hình ảnh nội tuyến trong trang web của bạn phải có thẻ ALT thích hợp. Lưu ý rằng hình ảnh được áp dụng với CSS không có thuộc tính này.
Đối với hiệu suất trang web, tải quá nhiều hình ảnh hoặc thậm chí chỉ là một vài hình ảnh khổng lồ không được tối ưu hóa đúng cách để phân phối web , sẽ có tác động tiêu cực đến tốc độ tải. Vì lý do này, hãy đảm bảo kiểm tra tác động của bất kỳ hình ảnh nào bạn sử dụng trong thiết kế trang web của mình và thực hiện bất kỳ bước nào cần thiết để cải thiện hiệu suất của trang web đó trong khi vẫn tạo ra giao diện tổng thể phù hợp cho dự án trang web của bạn.