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

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:

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/7SoA7eiiud1rxZDpt8um2VpLqOpsM/Z4eNo9WPb/PSgDoqK5H+1PG2PM/4R+z2/wDPP7SN/wCecVc0PxbBql62nXdrLp+poObeb+L/AHT3/wA9aAOioorkZvFesXVxJDo/hq5nRGKiedxGjYOOM8EfjQB11FcedV8cIC7eH7J1H8KXA3f+hVo+HfFEWuSz2ktrLZahb8y20vUD1B446du4oA36KCcDJ6VyEvjK71G8ltfDWlNqAiba9y77IgfY9/zHtmgDr64rW/8Akp/h7/rjJ/6C9WD4g8S6aPO1bw+slsOXkspd7IPXbk5rNutRtNV+IXhu8spllgeCTDDscPwR2NAHf0UUUAFYGg+H5dI1jWr2SdJF1CYSqqggpgscH/vr9K36w9D8QnWNW1iyNsIhp0wiDh93mZLDOMcfd9+tAG5RUVzN9ntJpgNxjRnx64Ga5S28dC60mzmg06SbUrsv5VlE+44ViNzNjheOuPX0NAHYUVxtz4k8TaRGbvVNAiayX/WNbTBmjHqRk5/l7itLUfF1jZ6dZ3Nsj3k18AbW3i+/J/hjoaAOgorjrjXvF1lCbu48OQNbKNzxxXGZFH4Zz+ArodF1i113TI760J8t+CrdUYdQaANCisnXdabRoImjsLm9mmbakVuuTnGefQfhWKNa8Z3I3weGreFD0E9wM/lkH9KAOwori5fF+taM6P4g0Ew2jNg3FtIHC/Uc/wAxXYwyxzwxzROHjkUMjDoQRkGgB9Fc5rXixNP1BdLsLOXUdTYZ8iI4CD1Zu3+elQLqPjRR5j6HYOvXykucN9Mk4oA6qiuMvPiBDZ6bO82nywalAV32M7bDgnG5WxyPwrsYn8yJHxjcoOKAHUVy954vaTUJNO0LT5NUuojiVlYJFGfdj/n3qF9Y8Y2qedP4etp4gMslvcfOP55/AGgDrqKytC1+z8QWbT2pZXjO2WGQYeNvQitWgAooooAKKKKACiiigAooooAKKKKACiiigAooooA4b/msP/bl/Su5rhpB5fxgi3cebZfL78H/AANdzQAVxHjz/kM+F/8Ar+H/AKEldvXEeOju17wrEPvNfA4/4ElAHW6l/wAgu7/64v8A+gmuK+F+kwx6RJqrqGuJXaNGP8CDsPTJz+ldrqX/ACC7v/ri/wD6Ca5z4bf8ibB/11k/9CoA62uL+IVubW0stfthtu9PnX5h3QnofbOPzPrXaVy/xEZV8EXwbqxjC/XzFP8AIGgDpIJVuLeOZPuyKHH0IzXGab/yV7V/+vFf/aVdVpCsmi2CtncLeMHPrtFcrpv/ACV7V/8ArxX/ANpUAdbqV4unaXdXrDIgiaTHrgZxXNfD6w26K+r3Hz32oyNLJI3XG4gD9CfxrV8XKzeEdVC9fs7H8ByaZ4MdX8HaWUxjycceoJB/WgDdrj/iFYkaTFrVt8l7p0iukg67SwBHuMkH8/Wuwrn/ABu6p4M1MvjHlgc+pYAfrQBr6fdrf6ba3ijCzxLIB6bgD/WrNYvhhhbeDtNkmbaqWiOxPZduf5Vzmn2l548aXUdQup4NH3slvZwtt8wDjLHv/wDr6UAdjLq2mwHE2oWkZ9HmUfzNcfNd2k3xX0uaxuYZlntHSVoZAwyFc8478D8q3ofBfhyBAq6TAwHeTLn8yTXPXGn2Om/FTRIbG2it1a2kZkjXaCdsgz+lAGv8QdSk07wnP5TFZLl1t1I685J/QEVsaJpcOjaPbWMKgCNBvI/ib+In6muZ+Jo26JYSEEol8hb6bWrtqACvOrnSLfS/izpb2qhIrpXmKDorbXBx9cA/jXotcVrf/JT/AA9/1xk/9BegDtaKKKACuI8Ff8jV4u/6+1/9Ckrt64jwV/yNXi7/AK+1/wDQpKAOt1L/AJBd3/1xf/0E1x3wv0yGHQpNR2g3FxIybv7qL2/PJ/Kux1L/AJBd3/1xf/0E1znw2/5E2D/rrJ/6FQB1U0STwyQyKGSRSrA9wRg1558MtMTdfXsx8yS2c2sJbny1yWbHpkt/P1r0auI+Gv8Ax4at/wBfzfyFAHb1xHgRRa614m0+PAggvA0ajsCXH8lFdvXEeDv+Rx8Wf9fC/wDoT0AdvUc1xDbrunmjiX1dgo/Wuc8Waze201lo2klV1G/YhZCM+Ug6t/P8jTLTwFpKETal52pXZHzzXMjHJ9hnp9c0AWfEGq6Nd+H9Rtm1KxZntnAUToTu2nGBnrnFN8BytN4J01mPIV1/AOwH6Cmav4Y0G20PUJk0q0Ro7aRw/ljKkKTnNHw+/wCRG07/ALa/+jXoAzvhtGtzpt/q8uHvLu6bzHPXAwcfmSfy9K7evONP1KTwx4j1e00+0uNQ0hZRJMLdNzW8h6gevTH4e1bv/CwtAC4Mtz5v/PH7O27+WP1oAzPipYQSaFb3xVRcQzBA/cqwOR+YB/P1rc8Uai+k+C7m4jYpN5KxoRwQzYXI9xkn8Kw54dQ8dalaiaymstBtpBKfPXDzsM9vTt+JrQ+JKs3g2cjOFljJ+m7H9aANDwfpMWkeGbOJUAlljE0zdyzDPP04H4Vu1xtl4Wv57G3mj8VaoqSRKygNwARmp/8AhEdR/wChr1X/AL6oAqyoNH+KNu0Pyw6rbsJV7F1BOf8Ax0fmfWu1rlLbwW8WsWmpXWt3l5JaklFnwRz2rq6ACiiigAooooAKKKKACiiigAooooAKKKKACiiigDjPG1jdWl9p/iewiMk1gds6Dq0XP6csD/ve1b+k+ItL1q2SW0u4yzDJiZgHU+hFalc7f+BfDuoSmWTT1jkbq0LFM/gOP0oA2bzUbLToTLeXUMCDqZHAri9Nkk8Y+NI9YSN10jTVKwM4x5rnuP5+2B61qW3w88N20gc2bzEdBLKxH5d/xrpooY4IlihjSONRhURQAB7AUAQal/yC7v8A64v/AOgmvOvh/wCIF0ewjs9T/c2d3IzWty33Nw4ZCe3QH8a9F1L/AJBd3/1xf/0E1yngOxtdR8BxW15BHPC0smUcZH3uv196AOzWRGjEiupQjIYHjHrmuD8RXaeMNZtPD2nMJrSKQTXtxGcoAP4QR+P4kehrSb4c+HmbiG4WPOfKE7bf15roNN0mw0e2+z6fapBFnJC9SfUk8n8aALgGBgdK4jTf+Svav/14r/7Srt6ox6PYQ6xNqyQYvpo/Lkl3tyvHGM4/hHbtQBauII7q2lt5RmOVCjj1BGDXD+FNTHhm5n8MazKsJikL2kz8JIjHOATwOefqSO1d5VLU9I0/WLcQahaxzoORu6r9COR+FAFzcuzfuG3Gc54xXCeKdQHim8t/DOkSrMrSCS8nQ5SNR2z0Pr9QBWh/wrnw908q52Zzs89ttdBpuk2GkW5gsLWO3jJyQo5Y+56n8aAEvLESaJPp9v8AIGtmhj9vl2iuY+HeqwHQ10eVhFfWbujwvwxyxOcfU4/Cu0rC1fwfoutXH2i6tcXHeWJijH644NAF3VNb07Rrdpr66jiAGQmcs3sB1Nef6fLfX3xL0nVL2Iwi8SV4IW6pEI3C5+vX8a6/TfBGgaZOJ4rISzA5DzsXx9AePxxWpNpVlPqlvqckO68t1KxSb2G0EEHjOD1PUUAU/FOjHXfD11YpgTEB4iezjkfn0/GqXhHxLBqmnxWVy4h1S3XypoJPlYleNwB6+/oa6asXV/Cmja3L515Zjz/+e0ZKN+JHX8aANG+1Gz0y2a4vbmOCJRks5xn6DufYV51DqVxrHxM0fUHgeG1lRxaK/DNGFf5iPckn6YrqbPwH4fs7gT/ZGnkXG3z5C4H4Hj862JtJsbjUrbUJYN11bArC+4jaCMHgHB69xQBdooooAK4jwV/yNXi7/r7X/wBCkrt6o2Wj2GnXd5dWkHlzXj7523sd7ZJzgnA+8enrQBJqX/ILu/8Ari//AKCa5z4bf8ibB/11k/8AQq6uSNJonikGUdSrD1BqtpumWekWS2djD5UCkkJuLcnrySTQBbriPhr/AMeGrf8AX838hXb1R0zR7DR45UsIPJWaQyON7Nlj35JoAvVxHg7/AJHHxZ/18L/6E9dvVGz0ew0+8u7u1g8ue7bdO+9jvPPYnA6npQByfiyb+x/G2ha5OD9jCtbyNjIQkNz+TZ/4Ca7WO5gltxcRzRvCRkSKwK49c028s7a/tXtruFJoXGGRxkGuZPw38OeZu+zzhM58vz22/wCP60AVPFeujV7e40PRJBPIY2e7uE5SGNRkjPQk4x+laXw+/wCRG07/ALa/+jXrYtdH06xsHsrW0jht3Uq6oMbgRjk9SffrUmn6fa6VYx2VlF5VvHnYm4tjJJPJJPUmgDkLePWvCOp6j5OkvqenXc7XCvA37xCeoK9/8/Srn/CdKnE3h3XEPcfZen5kV1tFAHP6T400XV7kWsU7w3ROBDcJsYn0HYn2zmtLWdNTV9Gu9PcgCeMqGPZuoP4EA1gfELTLS48M3F88ardWu14phww+YDGfTn863tDuZbzQNOuZzmWW2jdz6kqCTQBzfg7xAlvaroGsOLXUbL90qynaJEH3dp74HHuMGuzByMjpWdqug6XrSBdQs45iowrnhgPZhzWKPh3oGNuy6Kf3PtDYoA6OK/s57l7aG6hknRdzRo4JUdOQOlWKzdK0DS9EVhp9nHCWGGcZLEe5PNaVABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAFe/RpNOukRSzNE4AHUnBrB8A2VzYeFYYLuCSCYSOSki4IBPpXTUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUjZ2nacHHFLRQByI8QeJdM/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.

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

• 2. 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