Asked Jul 12th, 2019 4:43 PM 173 0 2
  • 173 0 2
0

Đường dẫn tuyệt đối trong rect

Share
  • 173 0 2

Chào mọi người, mình có chút thắc mắc muốn nhờ mọi người giúp đỡ, cảm ơn vì đã dành thời gian cho mình. Mình đặt các thẻ như img, a với các đường dẫn tương đối, nhưng điều này khiến mình gặp một số phiền phức như nếu site a: http://doman.com/page khi người dùng truy suất vào /page/cái-gì-đó/cái-gì-nữa thì với đường dẫn tương đối ở trong cái-gì-nữa url của các thẻ như img, a sẽ không còn trỏ chính xác gây ra lỗi hiển thị ảnh cũng như sai lệch đường dẫn. Dạo qua các website khác mình thấy có vẻ họ dùng đường dẫn tuyệt đối thì phải, mình không biết là có cách giải quyết nào không, thay vì mình ngồi chuyển hết đường dẫn tương đối sang tuyệt đối?

Jul 12th, 2019 5:42 PM

Bạn deploy code lên đau vậy nhỉ

0
| Reply
Share
Dũng Nguyễn @nihilism.core
Jul 12th, 2019 6:12 PM

@HuyDQ hiện mình đang làm ở local bạn ạ

0
| Reply
Share

2 ANSWERS


Answered Jul 13th, 2019 8:45 AM
Accepted
+3

Nếu bạn làm việc với React thì mình nghĩ đầu ra của bạn sẽ là 1 single page application (SPA) rồi thi việc url giữa các trang sẽ do react-router quản lý cho bạn rồi nên bạn sẽ không phải lo đến vấn để thẻ <a> hay chính xác là component <Link /> bị trỏ sai so với khi dev. Còn với ảnh thì nếu bạn import ảnh theo cú pháp:

import logo from './images/logo';

const Logo = () => <img src={logo} />

Thì khi build ảnh của bạn sẽ được chuyển về dạng base64 và không phụ thuộc vào đường dẫn nữa. Ví dụ mình có 1 ảnh như sau:

upload-serie-img.jpg

Và sử dụng cú pháp như mình nói ở trên thì trong code khi build ra ảnh của bạn sẽ được chuyển về dạng như này và sử dụng trên trang web của bạn:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA+Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2ODApLCBkZWZhdWx0IHF1YWxpdHkK/9sAQwAIBgYHBgUIBwcHCQkICgwUDQwLCwwZEhMPFB0aHx4dGhwcICQuJyAiLCMcHCg3KSwwMTQ0NB8nOT04MjwuMzQy/9sAQwEJCQkMCwwYDQ0YMiEcITIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIy/8AAEQgA+gHCAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A9MooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAopvmx+Z5e9fMxnbnnH0p1ABRRTXkjjKh3VSxwoJxk+1ADqKKKACiiigAooqqmpWcmpSaclwjXkab3hB+ZV45/UfnQBaooooAKKKKACiiigAooooAKKKKACiiqsupWcF/DYy3CLdTAmOI9WAz0/I0AWqKKKACiiqtrqVne3Fzb21wksts22ZVPKHng/kfyoAtUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAcN/zWH/ty/pXc1w3/ADWH/ty/pXc0AFcR48/5DPhf/r+H/oSV29cR48/5DPhf/r+H/oSUAdvRUVzN9ntJpgNxjRnx64Ga5W38eW8uiWl2bOR767ZlhsYG3u2CRnOOBx1x+eKAOvorkW1Xxsy+anh60VOvlNcgvj65Aq5oPiuLVruTT7u1k0/Uo+TbTH7w9VPGf89aAOiriNN/5K9q/wD14r/7Srt64jTf+Svav/14r/7SoA7eiiud1rxZDpt8um2VpLqO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HHFLRQByI8QeJdM/d6r4ea6A/wCW+ntuDe+3r/Kj/hO0YFYvD2uPL/c+y/8A1z/KuuooA4a4sdf8ZzQx6lajStHRw7wl8yzY7H0/THvXbxxpFGscahUQBVUdgKdRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/9k=

Nếu bạn không tin có thể copy đoạn base64 trên và đem vào lên 1 trang convert base64 nào đó sang image để thử. Một điều nữa là với cách build thông thường thì React sẽ mặc định khi vào domain http://doman.com/ sẽ đi vào ngay file index chứa phần code js và css đã được build. Tuy nhiên nếu bạn đặt theo kiểu http://doman.com/spa mới là trang có chứa code js và css từ react thì trước khi build bạn cần mở file package.json trong create-react-app lên và thêm mục sau vào:

{
    "homepage": "http://doman.com/spa",
   ...
}

Để quá trình build sẽ tự động setup lại đường dẫn cho bạn.

Share
Dũng Nguyễn @nihilism.core
Jul 16th, 2019 4:13 PM

ôi trời, ông bạn nhiệt tình quá, cảm ơn bạn nhiều nha, mình hiểu rồi

+1
| Reply
Share
Jul 16th, 2019 5:01 PM

@nihilism.core ko có gì nha bạn 😄

0
| Reply
Share
Answered Aug 2nd, 2019 10:02 AM
0

Có 2 cách: Ví dụ ảnh của bạn để trong thư mục assets/images

    1. Import kiểu base 64
import demo from './images/demo.png';
<img src={demo} />

Nếu tự config webpack thì phải thêm đoạn config để babel convert ảnh sang dạng base 64

module.exports = {
    ...
    module: {
      rules: [
        ...
       { test: /\.(png|svg|jpg|gif)$/, use: [ { loader: 'file-loader' } ] }
      ]
    }
  }

Nhược điểm: Nếu nhiều file ảnh, hoặc file ảnh nặng thì đống base 64 sẽ rất lớn --> file phình to --> load chậm Dùng trong trường hợp có ít ảnh, ảnh có dung lượng nhỏ, dùng để load icon

    1. Trỏ đường dẫn tuyệt đối (Tùy thuộc vào deploy server dùng gì) Nếu dùng nodeJS để chạy server thì config
app.use(express.static('assets')) //trỏ đến thư mục assets

Sử dụng <img src="/images/demo.png" /> --> Bình thường sẽ dùng cách này, page sẽ nhanh hơn

Share