Vấn đề mất các liên kết hình ảnh, css, javascript khi rewrite url

Đây là một lỗi cơ bản, mà rất nhiều người gặp phải khi sử dụng kỹ thuật rewrite url, nguyên nhân chính là do thói quen viết code, và cách suy nghĩ của chúng ta.

Tôi lấy ví dụ thế này, Tôi có  2 đường dẫn gốc là http://powernet.vn/Categories.aspx?id=1 và
http://powernet.vn/Products.aspx?catid=1&id=100

và một thư mục chứa ảnh có đường dẫn như sau http://powernet.vn/Images (bên trong thư mục này có một số bức ảnh, mà tôi sẽ sử dụng để hiển thị trong trang Categories.aspx, Products.aspx). Như vậy, chúng ta có thể thấy trang Categories.aspx, Products.aspx và thư mục Images là ngang cấp với nhau.
Để hiển thị một bức ảnh home.jpg bên trong thư mục Images, tôi sẽ gọi trong các file như sau:

Categories.aspx:
Products.aspx:
Vấn đề:

Nếu như tôi rewrite url đối với Categories.aspx thành http://powernet.vn/1/Thoi-trang.html, Products.aspx thành http://powernet.vn/1/100/Quan-jean-ninomaxx.html, khi chạy các trang này chúng ta sẽ thấy không hiển thị được đúng đường dẫn bức ảnh (tương tự với các file css hay javascript).

Lúc đó đường dẫn sẽ có dạng: http://powernet.vn/1/Images/home.jpg hoặc 1/100/Images/home.jpg
Bây giờ chúng ta sẽ khắc phục bằng cách sửa lại đường dẫn trong file Categories.aspx thành, Products.aspx thành , như vậy sẽ rất rắc rối, khó nhớ và khó kiểm soát code nữa. Sau này nếu phát sinh cần chia thêm một cấp nữa, lại phải sửa lại một loạt đường dẫn các file img, css, javascript. Hoặc nếu chúng ta sử dụng MasterPage nữa, thì đúng là bó tay, sửa để cho chạy được với thằng Categories.aspx thì hỏng thằng Products.aspx (hoặc ngược lại).

Quay trở lại với phần mở đầu, tôi nói nguyên nhân do thói quen viết code và cách suy nghĩ là vì như sau: từ trước tới nay chúng ta chỉ chú ý đến việc so sánh file cần hiển thị bức ảnh nằm ở vị trí nào, trước hay sau so với file ảnh home.jpg, nên khi gặp vấn đề trên chúng ta sẽ không biết phải nên xử lý thế nào, mà quên mất một điều rất cơ bản đó là dấu "/" (slash).

Cách giải quyết: Hãy luôn so sánh các file với thư mục root (domain name).

Nếu bạn viết lại các đường dẫn trên thành , có thêm dấu gạch chéo ở đây, thì tại các file Categories.aspx, Products.aspx sẽ luôn hiểu như sau: tìm thư mục Images/home.jpg ngay phía sau domain http://powernet.vn. Bây giờ cho dù chúng ta có rewrite bao nhiêu cấp độ thư mục đi nữa thì bức ảnh của chúng ta (hoặc các file css, javascript) vẫn luôn hiển thị đúng đường dẫn. Rất đơn giản phải không các bạn!

Bài viết này có hữu ích?

735 Khách hàng đánh giá tốt (1014 Đánh giá)
 In bài viết

Nên đọc

Khắc phục Warning: touch() [function.touch]: Unable to create file

Nếu bạn gặp lỗi này: Warning: touch() [function.touch]: Unable to create file...

Upload avatar và đính kèm tại forum VBB (vBulletin) server safe mode ON

Trong trường hợp bạn gặp lỗi này: Warning: move_uploaded_file() [function.move-uploaded-file]:...

Cannot modify header information - headers already sent by

Khi phát sinh lỗi này: Warning: Cannot modify header information - headers already sent by...

Một số cách chuyển đổi có dấu sang không dấu trong rewrite url

  Tôi có đọc rất nhiều bài, các bạn hỏi sau khi đã biết cách rewrite url rằng: bây giờ không...

Cách restore data với dung lượng lớn

  Hướng dẫn backup import data bằng sql dumper cho data có dung lượng lớn 1. Cài Đặt My Sql...