Display image dynamically in ReactJS

[MossGreen]

Mn cho mình hỏi về cách load ảnh trong ReactJS với. Mình khá bối rối không hiểu nó hoạt động kiểu gì. Không hiểu sao 2 đoạn code này tạo ra 1 string giống hệt nhau mà một cách hoạt động cách còn lại lại không. Tìm nát cái google cũng không hiểu tại sao luôn. (Mình mới tìm hiểu về React)

  const smFlagSrc =
    "../../assets/data/flags/16x16/" +
    countryTerritory.alpha2Code?.toLowerCase() +
    ".png";
  const flag1 = require("../../assets/data/flags/16x16/af.png").default;
  // khong hoat dong
  const flag2 = require(smFlagSrc).default;
  // chang hieu sao luon
  const path = "../../assets/data/flags/16x16/af.png";

  // JSX:
 <img src={flag2} />
 <img src={require(path)} />

Edit: Mình muốn load dynamically nên không muốn dùng cách 1 hoặc cách import image base 64 kiểu này:
import af from '../../assets/data/flags/16x16/af.png'

[tungsoul (thanh tung phan)]

ko biết vì sao nhưng mình thử string kiểu này thì hoạt động bình thường

const img = "logo512";
const img2 = "./logo512.png"

<img src={require(`./${img}.png`).default} alt="" />
<img src={require(`${img2}`).default} alt="" />

mình cũng chỉ mới học frontend với react cho vui nên ko hiểu kỹ js lắm
chắc là cái hàm require nó nhận string hơi quái dị, h muộn rồi có gì mai ngủ dậy tìm hiểu vậy

[qloved (Quân)]

cái này thường là do webpack hoặc tool bundle của bạn không nhận ra được link dạng động trên nên không import thành công được. Nhất là những link mà không thể infer được lúc compile time thì sẽ không import được đâu

[MossGreen]

Vậy phải làm sao bạn? Hoặc có cách nào khác để load image dynamically trong react không bạn? Mình tìm google mãi mà vẫn chỉ loanh quanh vài cách này

[qloved (Quân)]

Bạn có thể load sẵn các image vào 1 object, sau này cần thì lấy ra từ object đó. Hoặc nếu bạn lo vấn đề size bị phình to thì move toàn bộ image vào thư mục public và access nó như thẻ img ở html thông thường thay vì phụ thuộc vào thư viện

[Lovemagic]

Cái này k phải vấn đề của React lắm.

Bạn nên tìm theo từ khóa dynamic import img webpack, hoặc như bạn đang dùng cú pháp requrire, keyword require webpack (dynamic image)

Với từ khóa đầu tiên đã có đúng trường hợp import country flag như bạn cần luôn: https://stackoverflow.com/questions/42118296/dynamically-import-images-from-a-directory-using-webpack

Lưu ý, các câu trả lời đều được upvote, nghĩa là nó chính xác, còn bạn copy/paste nó không chạy thì cũng phải nói là … dễ hiểu, vì webpack phiên bản có thể khác, setup có thể khác… quan trọng là bạn nắm được cái nguyên lý hoạt động, cụ thể ở đây là require trong webpack thì sẽ vận dụng được.

[MossGreen]

ReactJS 2021 import image dynamically work with folder inside src folder:

_src
___assets
___data
_____flags
_______16x16
___components
_____Country*

  const path = require(`../../assets/data/flags/16x16/${countryTerritory.alpha2Code?.toLowerCase()}.png`)
    .default;

Vẫn đang cố ngẫm lại xem tại sao nó lại chạy