Bắp Bút Tường

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