Bạn đang đưa file ảnh vào thẻ img để thêm hình ảnh vào một trang web, sau đó bạn thêm một vài CSS cho tấm ảnh đó đẹp hơn, và sau cùng bạn ra browser để xem thành quả sau cùng. Nhưng xu thay, bạn không thấy hình của bạn ở đâu. Như một trò chơi trốn tìm, bạn sẽ phải tìm hiểu xem nguyên nhân nào làm cho ảnh của bạn tàng hình như vậy và kéo chúng ra. Sau đây mình sẽ liệt kê một vài “cách” để img trốn khỏi bạn.
Mục lục
Hình ảnh của bạn không tồn tại
Khi mình nói tới việc file ảnh của bạn không tồn tại, nó sẽ có 2 ý nghĩa. Một là đường dẫn của bạn bị sai, nó không dẫn tới đúng file ảnh bạn cần, hoặc bạn input sai tên file ảnh bạn đang thêm vào. Một vài nhầm lẫn nhỏ như sai extension (*png, *jpg) hoặc chữ thường hay chữ in hoa trong file name cũng đủ làm cho trình duyệt hiểu sai mong muốn của bạn. Thứ hai, hình ảnh bạn đang thêm vào thực sự không nằm trong thư mục bạn đang dẫn tới. Trường hợp này thường xảy ra khi bạn export hình ra thư mục Downloads chẳng hạn và thản nhiên đi thêm đường dẫn là
../project/img/star.pngNhưng thật ra thì star.png vẫn trong thư mục Downloads. Do đó, việc đầu tiên bạn nên kiểm tra đầu tiên là hình ảnh đã thực sự nằm trong đúng thư mục bạn cần hay chưa. Sau đó, bạn hãy kiểm tra tới đường dẫn tới img đó.
Đường dẫn hình ảnh của bạn bắt đầu từ C:/
Mình đã bắt gặp những trường hợp img tag có src như thế này:
<img src="file:///Desktop/website/img/star.png" alt="">
<img src="C:\Documents and Settings\My Documents\website\star.png" alt="">Ví dụ đây là đường dẫn từ máy tính của bạn và bạn đã sử dụng đường dẫn tuyệt đối (absolute path) như vậy, mọi thứ vẫn sẽ OK, nhưng chỉ đối với “riêng một mình bạn”. Mọi chuyện sẽ khác đi rất nhiều khi bạn push code lên git và đồng nghiệp của bạn pull code về nhưng lại không thấy hình ảnh ở đâu cả. Nguyên nhân cực kì đơn giản vì đồng nghiệp của bạn không store thư mục project của mình lên desktop hay thư mục “My Documents”. Tất nhiên, đây là lỗi của những tấm chiếu mới sẽ gặp phải. Nếu bạn là một coder pro rồi, xin hãy dùng đường dẫn tương đối (relative path). Một ví dụ đơn giản như sau
<img src="img/star.png" alt="">Bạn có thể tìm hiểu thêm về absolute path và relative path tại bài viết này
File Permissions của file ảnh
Vì một vài nguyên nhân nào đó không rõ, file ảnh của bạn sẽ vô tình bị cấm đọc (read), nghĩa là trình duyệt sẽ không đọc được file ảnh và không hiển thị chúng lên được. Riêng về kinh nghiệm của mình, vấn đề này có thể ít khi gặp khi mình code trên Windows, nhưng khi mình làm việc trên máy MAC thì thỉnh thoảng mình sẽ gặp. Để fix lỗi này rất đơn giản, bạn hãy sửa lại quyền cho file ảnh là xong, ví dụ như hình sau
CSS hoặc JS ẩn hình đi
Sau đây mình xin liệt kê một vài CSS giúp hình ảnh biến mất trong vòng 1 nốt nhạc
img {
display: none;
}
img {
opacity: 0;
}
img {
visibility: hidden;
}
img {
width: 0;
}
img {
position: absolute; //Hình của bạn sẽ bay đi một chỗ nào đó trong trang nếu position không được dùng đúng mục đích
}Vì vậy, nếu bạn đã kiểm tra tất cả các trường hợp có thể xảy ra nhưng vẫn chưa tìm được nguyên nhân, bạn nên kiểm tra thử CSS hoặc có đoạn Javascript nào ảnh hưởng tới hình ảnh trên website của bạn nhé. Có những trường hợp coder sử dụng JS để thực hiện lazy loading cho hình ảnh nhưng vì nguyên nhân nào đó làm cho đoạn code không được thực thi, thế là hình ảnh vô tình bị ẩn đi.
Tổng hợp trên đây là từ kinh nghiệm làm việc của mình trong nhiều năm, có thể còn những tình huống khác nhau nữa mà mình chưa từng gặp phải. Các bạn có thể chia sẻ cho mình và những bạn đọc khác cùng biết nhé. Chúc các bạn làm việc vui.