Đâ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.
Quay trở lại với ví dụ cụ thể ở bài này. Tôi có một 2 đường dẫn gốc là:
- http://lichsu.vn/Categories.aspx?id=1
- http://lichsu.vn/Products.aspx?catid=1&id=100
và một thư mục chứa ảnh có đường dẫn như sau http://lichsu.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: <img src = "Images/home.jpg"/>
Products.aspx: <img src = "Images/home.jpg"/>
Vấn đề:
Nếu như tôi rewrite url đối với Categories.aspx thành http://lichsu.vn/1/Thoi-trang.html, Products.aspx thành http://lichsu.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://lichsu.vn/1/Images/home.jpg :D 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
<img src = "../Images/home.jpg"/>, Products.aspx thành <img src = "../../Images/home.jpg"/>, 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). Tôi phải phóng to dấu gạch chéo kia lên.
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 <img src = "/Images/home.jpg"/>, 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://lichsu.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!
Tuy nhiên cũng có một vài chú ý cho các bạn:
- Nếu bạn đang develop với VS thì đường dẫn của bạn thường là:http://localhost:port/ProjectName/Categories.aspx?id=1, sử dụng dấu gạch chéo, khi bạn chạy lúc đó nó sẽ tìm tới thư mục gốc, bỏ qua thư mục ProjectName (tên project của bạn) và chúng ta sẽ có đường dẫn ảnh làhttp://localhost:port/Images/home.jpg. Cách giải quyết của tôi là thêm tên project vào trước mỗi đường dẫn, ví dụ: <img src = "/ProjectName/Images/home.jpg"/>, _cke_saved_src = "/ProjectName/Images/home.jpg"/>, cách này chỉ chạy được trên local khi đang develop, trước khi build project để chạy trên IIS hay trên hosting thì bạn chỉ cần find và remove tất /ProjectName trong các đường dẫn đi là được. (đừng nói là không biết find và remove all như thế nào nhé). Tuy nhiên cách này khi đang develop lại không thể view ở chế độ Design được, vì các đường dẫn đã bị đặt sai đi, chỉ có thể View in Browser được thôi.
- Bạn nào có cách nào hay hơn để giải quyết vấn đề này, xin hãy reply bài viết này cho tôi biết nhé.
Đến đây, vấn đề về đường dẫn ảnh, css, javascript đã được giải quyết xong, cho dù các bạn có rewrite lại thành bao nhiêu cấp thư mục đi nữa. Luôn đặt dấu / (slash) lên trước mỗi đường dẫn.
Đoàn Thành Nhân – http://lichsu.vn
