sư khác nhau khi lấy hình ảnh từ folder src/assets và puplic/image trong Reactjs

1. Thường thì đối với web người ta hay đặt để riêng một public hoặc một số framework để tên static chẳng hạn. Thư mục này mang ý nghĩa là public tức là người dùng sẽ hoàn toàn truy cập được và xem được nội dung của file. Thường các framework sẽ config sẵn để host các file static trong thư mục này luôn.

VD: /public/images/logo.svg Khi đó, chúng ta truy cập https://localhost/images/logo.svg là có thể xem được ảnh logo luôn.

2. Còn với thư mục src thì khác, tất cả những nội dung trong thư mục này sẽ là source code của dự án, hoặc là những file mà chúng ta không muốn cho end-user xem được trực tiếp. Nếu không thì là bị lộ source code rồi còn gì. Chẳng hạn như: source code, file scss..

Tuy nhiên, ngoài lý do source code phải private, thì còn một điểm nữa đó là, những file này, mình thí dụ là file JS, SCSS...thì phải được compile ra thành JS/CSS thuần thì trình duyệt mới hiểu, nên những file này không cần thiết để ai cũng truy cập được.

=> Như bạn thấy, trên đây là lý do chính mà người ta phân ra một thư mục public và src riêng nhé.

• public để ai cũng xem được
• src chứa source, hoặc các file JS/SCSS cần build ra JS/CSS thuần
• Các file JS/CSS thuần sau khi được build thì sẽ quẳng qua thư mục public, để end-user truy cập được

3. Còn về việc lấy hình ảnh từ src và public, thường thì sẽ có các cách này:

• Một số file ảnh nếu bạn import trong source code, thì các công cụ như webpack sẽ có các plugin để mã hóa lại tên file, nếu bạn muốn người dùng chỉ xem được theo tên đã được hash. Và thường ảnh gốc sẽ để trong src/assets và output ra thư mục public. Cùng một tên file, nếu nội dung file thay đổi thì file name được hash ra sẽ có tên khác, khi đó nó sẽ không bị cache bởi trình duyệt.
• Một số file ảnh nếu bạn không cần hash tên file, thì bạn quẳng luôn vào folder public để truy cập trực tiếp luôn giống như ở mục 1.

Mọi thứ đặt trong public thì src sẽ không truy xuất được, và ngược lại. Hiểu đơn giản là 2 cái nó thuộc 2 thế giới, những gì trong folder src sẽ được build ra thư mục dist/build, còn những gì trong folder public sẽ chỉ được copy sang build/dist thôi.

Còn lỗi trong hình thì bạn có thể thử 2 cách sau:

• Nếu muốn dùng hình trong thư mục public/image thì phải sửa đường dẫn lại thành image/next-pre_icon/preIcon.png.
• Nếu muốn dùng hình trong thư mục src/assets/image thì bạn phải import nó vào như một module (để webpack chuyển thành đường dẫn), rồi chèn module này vào thuộc tính src của img. Bạn đọc thêm ở đây nếu chưa rõ: https://create-react-app.dev/docs/adding-images-fonts-and-files