Yêu cầu thg 7 12, 2019 4:43 CH 703 0 2
  • 703 0 2
0

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

Chia sẻ
  • 703 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?

thg 7 12, 2019 5:42 CH

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

Avatar Dũng Nguyễn @nihilism.core
thg 7 12, 2019 6:12 CH

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

2 CÂU TRẢ LỜI


Đã trả lời thg 7 13, 2019 8:45 SA
Đã được chấp nhận
+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.

Chia sẻ
Avatar Dũng Nguyễn @nihilism.core
thg 7 16, 2019 4:13 CH

ô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

thg 7 16, 2019 5:01 CH

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

Đã trả lời thg 8 2, 2019 10:02 SA
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

Chia sẻ
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí