Có hai điều bạn có thể làm để sửa hình ảnh HTML không hiển thị trên trình duyệt:
- Kiểm tra đường dẫn
src
đến thẻ - Kiểm tra bộ nhớ cache của trang web trên máy chủ sản xuất
Hướng dẫn này sẽ giải thích các phương pháp trên, bắt đầu bằng cách kiểm tra đường dẫn src
Kiểm tra đường dẫn SRC để sửa hình ảnh không hiển thị
Mỗi hình ảnh trong HTML được hiển thị bằng cách sử dụng thẻ với nguồn hình ảnh được chỉ định trong thuộc tính
src
.
Bạn có thể đặt một đường dẫn tương đối hoặc một đường dẫn tuyệt đối đến thuộc tính src
tùy thuộc vào nơi bạn đặt hình ảnh.
Nếu hình ảnh của bạn được lưu cục bộ trong một thư mục bên cạnh vị trí tài liệu HTML của bạn, thì bạn có thể sử dụng đường dẫn tương đối.
Giả sử bạn có cấu trúc thư mục sau trong dự án của mình:
html-project
├── image.jpeg
└── index.html
Sau đó, bên trong tệp
html-project
├── assets
│ └── image.jpeg
└── index.html
2, bạn có thể hiển thị hình ảnh bằng thẻ sau:Khi hình ảnh của bạn là một thư mục xuống như trong cấu trúc sau:
html-project
├── assets
│ └── image.jpeg
└── index.html
Sau đó, bạn cần thêm thư mục
html-project
├── assets
│ └── image.jpeg
└── index.html
3 vào thuộc tính src
như sau:
Đường dẫn tương đối cũng có thể đi lên một thư mục bằng cách sử dụng mẫu
html-project
├── assets
│ └── image.jpeg
└── index.html
5, vì vậy nếu bạn có cấu trúc sau:html-project
├── assets
│ └── image.jpeg
└── pages
└── index.html
Tệp
html-project
├── assets
│ └── image.jpeg
└── index.html
2 có thể tiếp cận hình ảnh bằng thuộc tính src
sau:
Khi bạn có đường dẫn chính xác, đừng quên kiểm tra tiện ích mở rộng hình ảnh và đảm bảo rằng nó giống nhau giữa src
và hình ảnh thực tế.
Đôi khi một hình ảnh có tiện ích mở rộng
html-project
├── assets
│ └── image.jpeg
└── index.html
9 được ghi vào thuộc tính src
dưới dạng tiện ích mở rộng
1.Khi đường dẫn hình ảnh src
là chính xác, thì bạn cần kiểm tra xem hình ảnh có thể truy cập được bởi máy chủ của bạn không.
Hãy nhớ rằng nếu bạn sử dụng một máy chủ phát triển cục bộ như XAMPP, WAMP hoặc MAMP, thì hình ảnh phải được đặt bên trong thư mục phát triển.
Đối với WAMP, hình ảnh phải ở bên trong thư mục
3, trong khi đối với XAMPP và MAMP, bạn cần đặt hình ảnh bên trong thư mục
4.Cuối cùng, nếu bạn sử dụng một đường dẫn tuyệt đối, hãy đảm bảo rằng bạn không đặt đường dẫn đĩa cứng cục bộ của mình đến thuộc tính src
.
Ví dụ sau đây sẽ không hoạt động khi bạn đưa trang web lên mạng:not work when you put the website online:
Khi bạn đã xác minh rằng hình ảnh có thể truy cập được trong quá trình phát triển, hình ảnh vẫn có thể biến mất khỏi trang web sản xuất của bạn vì bộ đệm.
Hãy cùng xem cách xóa bộ đệm tiếp theo.
Kiểm tra bộ nhớ cache để sửa hình ảnh không hiển thị
Một lý do cho các hình ảnh không hiển thị trên một trang web là vì trình duyệt hoặc bộ đệm máy chủ vẫn phục vụ trang HTML cũ cho khách truy cập.
Điều này chỉ xảy ra khi bạn sửa đổi tệp HTML đã được xuất bản để bao gồm một hình ảnh mới trên trang.
Xóa bộ nhớ cache có thể khác nhau tùy thuộc vào trình duyệt mà bạn sử dụng.
Nếu bạn sử dụng Chrome, thì bạn có thể xóa bộ đệm bằng cách mở menu Công cụ Nhà phát triển và sau đó nhấp chuột phải vào biểu tượng tải lại.
Ở đó, bạn có thể nhấp vào tùy chọn bộ đệm trống và tải lại cứng:
Trình duyệt nên làm mới trang và kéo trang mới từ máy chủ của bạn.
Đây là một bổ sung cho câu trả lời được cung cấp bởi Marco Escaleira.
Tôi không chắc những gì bạn đang cố gắng đạt được bằng cách sử dụng Div với Data-IMG-URL? Bạn đang sử dụng JS để thay thế Div bằng phần tử HTML hợp lệ? Nếu bạn cần phải xem HTML được kết xuất. Nếu không thấy câu trả lời dưới đây.
Lý do duy nhất tôi có thể nghĩ để làm điều này là để xử lý một vấn đề hình ảnh đáp ứng hoặc có một hình ảnh nền mà bạn có thể định vị đúng. Cả hai trường hợp đó đều được phục vụ tốt hơn với HTML có ngữ nghĩa hơn và chúng sẽ trở nên có thể truy cập được.
1: Hình ảnh đáp ứng bằng cách sử dụng
Trong trường hợp này, bạn sẽ sử dụng thẻ
6 với các bộ nguồn hình ảnh. Điều này sẽ cho phép bạn trao đổi hình ảnh dựa trên kích thước cần thiết cho mỗi thiết bị và cung cấp cho bạn một yếu tố mới mà bạn có thể định vị. Lợi ích của việc này là bạn nhận được một dự phòng hoạt động và có thể sử dụng Webp và JPG / PNG để cải tiến hiệu suất.2: Cần một yếu tố mới để định vị
Trong trường hợp này, tôi khuyên bạn nên sử dụng bộ chọn sudo như
7 hoặc
8. Sau đó, bạn có thể sử dụng CSS để tiêm hình ảnh làm nền và định vị nó ở nơi bạn thích. Điều này sẽ giải quyết vấn đề khả năng truy cập như hình ảnh [mà tôi giả sử chỉ để trình bày] sẽ không còn được chọn bởi các thiết bị hỗ trợ.Để biết thêm thông tin, tôi sẽ giới thiệu việc nhìn vào //css-tricks.com/responsive-images-css/. Đó là một danh sách tuyệt vời về hình ảnh đáp ứng.