Hướng dẫn why is my html image not showing in phone? - tại sao hình ảnh html của tôi không hiển thị trong điện thoại?

Hướng dẫn why is my html image not showing in phone? - tại sao hình ảnh html của tôi không hiển thị trong điện thoại?
Ảnh từ Unplash

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:

<img src="assets/image.jpeg" />

Đườ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:

<img src="../assets/image.jpeg" />

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
<img src="assets/image.jpeg" />
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

<img src="assets/image.jpeg" />
3, trong khi đối với XAMPP và MAMP, bạn cần đặt hình ảnh bên trong thư mục
<img src="assets/image.jpeg" />
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:

<img src="file:///Users/nsebhastian/html-project/assets/image.jpeg" />

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ẻ

<img src="assets/image.jpeg" />
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ư

<img src="assets/image.jpeg" />
7 hoặc
<img src="assets/image.jpeg" />
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 https://css-tricks.com/responsive-images-css/. Đó là một danh sách tuyệt vời về hình ảnh đáp ứng.

Tại sao hình ảnh không hiển thị trong HTML trong thiết bị di động?

Trong trình duyệt, điều hướng đến menu> Thêm> Cài đặt.Trong cài đặt, đảm bảo cả tải hình ảnh và bật JavaScript được kiểm tra.make sure both Load images and Enable JavaScript are checked.

Tại sao trong hình ảnh HTML không hiển thị?

Bạn cần getype mã HTML của mình trong trường hợp trên: hoặc bạn cần đổi tên tệp trên máy chủ thành chữ thường để phối hợp với trang HTML.Có thể các tệp hình ảnh của bạn được tải lên chính xác vào máy chủ, nhưng đường dẫn của máy chủ đến hình ảnh không chính xác.your image files were uploaded correctly to the server, but the server's path to the image is incorrect.

Làm cách nào để thêm hình ảnh trong HTML vào điện thoại?

Sử dụng phần tử HTML để xác định một hình ảnh.Sử dụng thuộc tính HTML SRC để xác định URL của hình ảnh.Sử dụng thuộc tính HTML ALT để xác định một văn bản thay thế cho một hình ảnh, nếu nó không thể được hiển thị.Sử dụng các thuộc tính chiều rộng và chiều cao HTML để xác định kích thước của hình ảnh.. Use the HTML src attribute to define the URL of the image. Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed. Use the HTML width and height attributes to define the size of the image.