ReactJS và hình ảnh trong thư mục chung

Tôi là người mới trong ReactJS và tôi muốn nhập hình ảnh trong một thành phần. Những hình ảnh này nằm bên trong thư mục chung và tôi không biết cách truy cập thư mục từ thành phần phản ứng.

Có ý kiến ​​gì không?

BIÊN TẬP

Tôi muốn nhập một hình ảnh bên trong Bottom.js hoặc Header.js

Thư mục cấu trúc là:

Tôi không sử dụng webpack. Tôi có nên không?

Chỉnh sửa 2

Tôi muốn sử dụng webpack để tải hình ảnh và phần còn lại của nội dung. Vì vậy, trong thư mục cấu hình của tôi, tôi có các tệp tiếp theo:

Tôi cần thêm đường dẫn của hình ảnh ở đâu và làm thế nào?

Cảm ơn

Để tham khảo hình ảnh trước công chúng, có hai cách tôi biết cách làm. Một giống như trên từ Homam Bahrani.

sử dụng

    <img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} /> 

Và vì điều này hoạt động nên bạn thực sự không cần bất kỳ thứ gì khác nhưng, điều này cũng hoạt động ...

    <img src={window.location.origin + '/yourPathHere.jpg'} />

Bạn không cần bất kỳ cấu hình webpack nào cho việc này ..

Trong thành phần của bạn chỉ đưa ra đường dẫn hình ảnh. Theo mặc định, phản ứng sẽ biết nó trong thư mục chung.

<img src="/image.jpg" alt="image" />

Các tài liệu phản ứng giải thích điều này một cách độc đáo trong tài liệu, bạn phải sử dụng process.env.PUBLIC_URLvới các hình ảnh được đặt trong thư mục chung. Xem tại đây để biết thêm thông tin

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

1- Thật tốt nếu bạn sử dụng webpack cho các cấu hình nhưng bạn có thể chỉ cần sử dụng đường dẫn hình ảnh và phản ứng sẽ phát hiện ra rằng nó nằm trong thư mục chung.

<img src="/image.jpg">

2- Nếu bạn muốn sử dụng webpack, đây là cách thực hành tiêu chuẩn trong React. Bạn có thể sử dụng các quy tắc này trong tệp webpack.config.dev.js của mình.

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},

thì bạn có thể nhập tệp hình ảnh trong các thành phần phản ứng và sử dụng nó.

import image from '../../public/images/logofooter.png'

<img src={image}/>

Chúng tôi biết React là SPA. Mọi thứ được hiển thị từ thành phần gốc bằng cách mở rộng sang HTML thích hợp từ JSX.

Vì vậy, không quan trọng bạn muốn sử dụng hình ảnh ở đâu. Cách tốt nhất là sử dụng một đường dẫn tuyệt đối (có tham chiếu đến công khai). Đừng lo lắng về những con đường tương đối.

Trong trường hợp của bạn, điều này sẽ hoạt động ở mọi nơi:

"./images/logofooter.png"

Bạn nên sử dụng webpack ở đây để cuộc sống của bạn dễ dàng hơn. Thêm quy tắc dưới đây vào cấu hình của bạn:

const srcPath = path.join(__dirname, '..', 'publicfolder')

const rules = []

const includePaths = [
  srcPath
]
    // handle images
    rules.push({
      test: /\.(png|gif|jpe?g|svg|ico)$/,
      include: includePaths,
      use: [{
        loader: 'file-loader',
        options: {
          name: 'images/[name]-[hash].[ext]'
        }
      }

Sau đó, bạn có thể chỉ cần nhập các hình ảnh vào các thành phần phản ứng của mình:

import myImage from 'publicfolder/images/Image1.png'

Sử dụng myImage như dưới đây:

<div><img src={myImage}/></div>

hoặc nếu hình ảnh được nhập vào trạng thái cục bộ của thành phần

<div><img src={this.state.myImage}/></div> 

Bạn cũng có thể sử dụng điều này .. nó hoạt động giả sử 'yourimage.jpg' nằm trong thư mục chung của bạn.

<img src={'./yourimage.jpg'}/>