Yêu cầu thg 4 30, 2021 7:12 SA 1824 3 3
  • 1824 3 3
+5

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

Chia sẻ
  • 1824 3 3

sư khác nhau khi lấy hình ảnh từ folder src/assets/image và puplic/image trong Reactjs là gì vây moi người?

3 CÂU TRẢ LỜI


Đã trả lời thg 5 7, 2021 6:47 SA
Đã được chấp nhận
+4
  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.

  1. 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 publicsrc 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
  1. 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.
Chia sẻ
Avatar Khang @khangnd
thg 5 7, 2021 11:04 SA

Giải thích chi tiết và dễ hiểu quá 🙂👍

Avatar tapcode @tapcode
thg 5 12, 2021 10:35 SA

@huukimit tks bn nhìu nha, học hỏi dx nhìu cái quá

Đã trả lời thg 4 30, 2021 12:14 CH
+3

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
Chia sẻ
Avatar tapcode @tapcode
thg 5 1, 2021 7:58 SA

cảm ơn bn, để minh thử xem thê nào

Đã trả lời thg 4 30, 2021 7:13 SA
0

icon.png

Chia sẻ
Avatar tapcode @tapcode
thg 4 30, 2021 7:14 SA

mình lấy hình ảnh với syntax như trên nhưng ko dx. lỗi chỗ nào thế mn?

Avatar Hoang vn @wiliamfeng
thg 6 7, 2021 3:31 SA

Câu hỏi khá hay, mình cũng hay làm React mà giờ bạn nói mình mới để ý tới

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í