- 57
Có một số lý do có thể tại sao hình ảnh của bạn không hiển thị trên các trang của bạn như mong đợi:
- Tệp hình ảnh & nbsp; không được đặt ở cùng một vị trí được chỉ định trong thẻ IMG của bạn.
- Hình ảnh không có cùng & NBSP; Tệp & NBSP; Tên như được chỉ định trong thẻ IMG của bạn.
- Hình ảnh & nbsp; Tệp & nbsp; bị hỏng hoặc bị hỏng.
- Hình ảnh & nbsp; file & nbsp; không bao giờ thực sự có & nbsp; được tải lên.
Bị hỏng & nbsp; link & nbsp; hoặc hình ảnh không thể được gây ra bởi các vấn đề trên & nbsp; server & nbsp; side. Chúng chỉ có thể được gây ra bởi không chính xác & nbsp; html & nbsp; mã hóa hoặc lỗi trong việc tải lên & nbsp; hình ảnh & nbsp; files & nbsp; lên máy chủ của chúng tôi.
Xử lý sự cố
Khắc phục sự cố hình ảnh bị hỏng nên bắt đầu bằng các bước sau:
- Định vị con trỏ của bạn trên hình ảnh bị hỏng và nhấp chuột phải chuột. Một menu bật lên sẽ xuất hiện với một số tùy chọn.
- Nhấp chuột trái vào tùy chọn để xem thuộc tính. Hộp thoại Thuộc tính sẽ hiển thị địa chỉ/url & nbsp; của hình ảnh như được xác định trong trang & nbsp; html & nbsp; trang. Nó sẽ trông giống như thế này:
//www.example.com/my-image-dir/myimage.png
Rõ ràng, bạn muốn thay thế & nbsp; domain & nbsp; tên, thư mục con và hình ảnh & nbsp; file & nbsp; tên khi thích hợp. Hai định dạng hình ảnh phổ biến nhất được sử dụng trên web ngày nay là PNG và JPEG, nhưng cũng có thể là GIF hoặc webp mới hơn, vì vậy hình ảnh của bạn sẽ, nhiều khả năng, kết thúc bằng tiện ích mở rộng .png hoặc .jpeg.
& Nbsp; url & nbsp; được hiển thị trong hộp thoại thuộc tính hiển thị vị trí mà trang web của bạn & nbsp; đang nói & nbsp; trình duyệt & nbsp; để tìm hình ảnh. Viết ra đường dẫn, hoặc sao chép và dán nó vào trình soạn thảo văn bản yêu thích của bạn để bạn có thể tham khảo nó sau.
Bây giờ bạn đã biết hình ảnh được cho là ở đâu và nó được đặt tên là gì, xác minh rằng nó ở đó. Truy cập & nbsp; bảng điều khiển của bạn & nbsp; và nhấp vào 'Tệp & nbsp; trình quản lý'. Bạn sẽ cần nhấp vào thư mục public_html & nbsp; & Nbsp; path & nbsp; được đại diện bởi "www.example.com" là thư mục "public_html" của bạn, vì vậy, nơi đầu tiên đi là & nbsp; thư mục. Kiểm tra và xem hình ảnh của bạn có nằm trong thư mục chính xác & nbsp; trong & nbsp; đường dẫn & nbsp; mà bạn có ở trên và tên tệp là chính xác.
Bạn cũng có thể sử dụng & NBSP; Lần đầu tiên bạn đăng nhập vào tài khoản của mình, bạn sẽ ở trong "root" hoặc "hệ thống" & nbsp; thư mục & nbsp; [trừ khi bạn có cấu hình máy khách của mình để tự động mở trong thư mục cấp dưới & nbsp;] Sử dụng lệnh "cd" để thay đổi thư mục trong & nbsp; ssh.
Tiếp tục điều hướng cho đến khi bạn đạt được thư mục con [hình ảnh của tôi trong ví dụ trên] trong đó hình ảnh của bạn [myImage.png trong ví dụ trên] được cho là được tìm thấy. Khi bạn ở đó, hãy thử xác định vị trí hình ảnh của bạn & nbsp; file & nbsp; [myImage.png trong ví dụ trên]. & Nbsp; ftp & nbsp; khách hàng sẽ tự động hiển thị tất cả Trong SSH, để có A & NBSP; Thư mục & NBSP; Liệt kê, Nhập "LS -A" [không có trích dẫn] và nhấn Enter.
Rất có thể là bây giờ bạn đã phát hiện ra vấn đề. Nếu hình ảnh & nbsp; file & nbsp; không có ở đó, hoặc đặt nó ở đó bằng cách nhấp vào 'tải lên' trong & nbsp; file & nbsp; trình quản lý hoặc điều chỉnh thẻ hình ảnh của bạn để nó phản ánh vị trí chính xác.
Dưới đây là một số điều quan trọng cần nhớ:
- Unix & nbsp; là trường hợp nhạy cảm. Theo như các máy chủ của chúng tôi & nbsp; có liên quan, myImage.png, myImage.png và myImage.gif là ba tệp hoàn toàn khác nhau & nbsp; Kiểm tra & nbsp; file & nbsp; tên - tên tệp trong thư mục & nbsp của bạn; thư mục & nbsp; và tên tệp trong & nbsp; path & nbsp; bao gồm trong & nbsp của bạn; trang web & nbsp; phải khớp chính xác. Nếu họ không, thay đổi cái này hay cái kia để họ làm.
- Vấn đề độ nhạy trường hợp đúng với & nbsp; thư mục & nbsp; tên. Myimagedir và myimagedir được coi là hai tên riêng biệt & nbsp; thư mục & nbsp; tên. Đảm bảo rằng & nbsp; thư mục & nbsp; tên cũng phù hợp.
Và sau tất cả những điều đó nếu nó vẫn không hoạt động -
Hệ thống & nbsp; path & nbsp; của hình ảnh & nbsp; file & nbsp; khớp với & nbsp; url & nbsp; của & nbsp; Đảm bảo rằng hình ảnh tải trên máy tính cục bộ của bạn [hãy thử nó trong & nbsp; trình duyệt của bạn] và sau đó & nbsp; tải lên & nbsp; nó một lần nữa [ở chế độ nhị phân, nếu sử dụng & nbsp; ftp].
Nếu nó vẫn không hoạt động và bạn là khách hàng hiện tại, vui lòng yêu cầu hỗ trợ bằng cách nâng vé hỗ trợ lưu trữ web. Hoặc nếu không phải là khách hàng hiện tại đăng ký tổ chức CPANEL của lớp kinh doanh ngay hôm nay để nhận được sự hỗ trợ mà bạn xứng đáng
Câu trả lời này có hữu ích không?
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
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
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
html-project
├── assets
│ └── image.jpeg
└── pages
└── index.html
Tệp
html-project
├── assets
│ └── image.jpeg
└── index.html
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
src dưới dạng tiện ích mở rộng
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
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.