Hạn chế nhập khẩu ứng dụng tạo phản ứng bên ngoài thư mục src

Question

Tôi đang sử dụng ứng dụng tạo phản ứng. Tôi đang cố gắng gọi một hình ảnh từ thư mục công khai của tôi từ một tập tin bên trong src/components của tôi. Tôi nhận được thông báo lỗi này.

./src/components/website_index.js không tìm thấy Module: Bạn đã cố ../../public/images/logo/WC-BlackonWhite.jpg nhập khẩu rơi ngoài src dự án/danh mục. Nhập khẩu tương đối bên ngoài src/không được hỗ trợ. Bạn có thể di chuyển nó bên trong src /, hoặc thêm một liên kết tượng trưng vào nó từ node_modules của dự án /.

import logo from '../../public/images/logo_2016.png'; <img className="Header-logo" src={logo} alt="Logo" />

Tôi đã đọc rất nhiều điều rằng bạn có thể làm một nhập khẩu để con đường nhưng điều đó vẫn không làm việc cho tôi. Mọi sự trợ giúp sẽ rất được trân trọng. Tôi biết có rất nhiều câu hỏi như thế này nhưng tất cả họ đều nói với tôi để nhập khẩu logo hoặc hình ảnh vì vậy rõ ràng tôi đang thiếu một cái gì đó trong bức tranh lớn.

Answer 1

Đây là hạn chế đặc biệt bổ sung bởi các nhà phát triển của tạo-phản ứng ứng dụng. Nó được thực hiện trong ModuleScopePlugin để đảm bảo các tệp nằm trong src /. Plugin đó đảm bảo rằng việc nhập tương đối từ thư mục nguồn của ứng dụng không đạt được bên ngoài nó.

Bạn có thể tắt tính năng này nhưng chỉ sau hoạt động eject của dự án tạo phản ứng-ứng dụng.

Hầu hết các tính năng và nội dung cập nhật của nó ẩn thành nội bộ của hệ thống tạo phản ứng-ứng dụng. Nếu bạn thực hiện eject, bạn sẽ không còn có một số tính năng và cập nhật của nó nữa. Vì vậy, nếu bạn chưa sẵn sàng quản lý và cấu hình ứng dụng đi kèm để cấu hình webpack, v.v. - không thực hiện thao tác eject.

Phát theo các quy tắc hiện tại (di chuyển đến src). Nhưng bây giờ bạn có thể biết cách xóa giới hạn: làm eject và xóa ModuleScopePlugin từ tệp cấu hình webpack.

Answer 2

Lỗi này khá rõ ràng - bạn cần di chuyển WC-BlackonWhite.jpg vào thư mục src của mình. Thư mục public dành cho các tệp tĩnh sẽ được liên kết trực tiếp trong HTML (chẳng hạn như favicon), chứ không phải những thứ bạn sẽ nhập trực tiếp vào gói của mình.

Answer 3

Để cung cấp thêm một chút thông tin cho câu trả lời của người khác. Bạn có hai tùy chọn về cách phân phối tệp .png cho người dùng. Cấu trúc tệp phải phù hợp với phương pháp bạn chọn. Hai tùy chọn là:

1. Sử dụng hệ thống mô-đun (import x from y) được cung cấp cùng với ứng dụng tạo và phản ứng với JS của bạn. Đặt hình ảnh vào thư mục src.

2. Phục vụ từ thư mục public và để nút Node phân phối tệp. ứng dụng tạo phản ứng cũng rõ ràng đi kèm với biến môi trường, ví dụ: <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;. Điều này có nghĩa là bạn có thể tham khảo nó trong ứng dụng React của bạn nhưng vẫn có nó được phục vụ thông qua Node, với trình duyệt của bạn yêu cầu nó một cách riêng biệt trong một yêu cầu GET bình thường.

Nguồn: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files