Table of contents
🥑 Vấn đề
Thoạt đầu mọi người sẽ nghĩ routes thì liên quan tới image làm sao được? Tuy nhiên mình đã gặp 1 bug ở bản:
{
"@builder.io/qwik": "1.1.4",
"@builder.io/qwik-city": "1.1.4"
}
Đó là khi import image vào Logo component:
export const Logo = () => <img src="images/logo.png" width="245" height="98"></img>;
Relative path trong source code tới image là public/images/logo.png.
Ta sử dụng Logo component phía layout, cụ thể là trong Header component.
Ta vào trang chủ - không sử dụng routes, thì mọi thứ vẫn OK, cho đến khi ta sử dụng routes...
Ta sử dụng <Link /> để redirect sang routes khác:
<Link href="/about">About</Link>
Khi navigation tới trang about, URL của image lại bị hiểu thành:
Trong khi URL đúng phải là:
URL bị thừa `about` path, dẫn tới lỗi 404 Not Found, không tải được image!
🥥 🍆 Giải quyết
-export const Logo = () => <img src="images/logo.png" width="245" height="98"></img>;
+export const Logo = () => <img src="/images/logo.png" width="245" height="98"></img>;
Ta thêm dấu / trước images là xong. Nhớ tắt pnpm start - dev server rồi chạy lại nhé!
Nguyên nhân có thể do routes đã điều hướng với cả image nếu ta định nghĩa src sai.