node.js 반응으로 require 메소드에서 경로를 사용하는 방법은 무엇입니까?

Question

태그 안에 require() 方法将图片的路径粘贴到 img를 사용하려고 합니다.

구성품입니다. console.log(img)가 올바른 경로를 반환하기 때문에 Prop은 부모로부터 올바르게 전달됩니다.

으아아아

json 파일의 모습은 다음과 같습니다.

으아아아

모든 폴더 경로가 정확하다고 확신합니다.

경로를 붙여넣어 보았습니다 并且正在工作。但是， 或 ${img})} alt="sth"/ > 성공했습니다.

저도 json 파일을 "img": require("../photo/photo.jpeg")로 변경하려고 했는데 json 파일 오류가 발생했습니다.

오류가 뜹니다找不到模块'../photo/photo.jpeg'.

Answer 1

아래 게시물을 참고하여 .json 文件更改为 .js 파일을 변환하여 더 간단한 해결 방법을 찾았습니다. 그런 다음 게시물에서 제안한 대로 데이터를 다음으로 변환했습니다.

으아악

그럼 방금 사용한 컴포넌트에서

require에서 템플릿 리터럴을 어떻게 사용하나요? (require(`${somePath}`))

Answer 2

이 버그는 React의 기본 웹팩require() 函数配合使用有关。 require() 不是标准的 JavaScript 函数，而是 Node.js 和 webpack 提供的功能。 require()이 빌드 프로세스 중에 모듈의 동기 읽기를 수행하는 방식과 관련이 있습니다. 즉, 웹팩은 런타임이 아닌 빌드 시간(애플리케이션이 실행되기 전)에 모듈 간의 종속성을 알아야 합니다.

따라서 require("../photo/photo.jpeg") 时，webpack 知道将此文件包含在构建包中，因为路径是静态的，而不是动态的。但是，当您尝试使用 require(img)를 직접 사용하면 webpack은 코드가 실행될 때까지 어떤 파일을 참조하고 있는지 알 수 없지만 너무 늦습니다.

이 경우 두 가지 가능한 솔루션을 제안합니다.

1. 동적 가져오기 사용:

이것은 Modern JavaScript에서 제공하는 기능이며 webpack에서도 지원됩니다. 구성 요소에서 이를 사용하는 방법은 다음과 같습니다.

으아악

이 작업이 제대로 작동하려면 JSON 파일에 프로젝트 루트에 대한 상대 경로를 제공해야 합니다.

1. 공용 폴더를 사용하여 이미지 제공: create-react-app를 사용하면 이미지를 공용 폴더에 넣을 수 있습니다. 그런 다음 공용 폴더에 대한 상대 경로를 통해 이러한 이미지를 참조할 수 있습니다.

으아악

JSON 파일에서는 공용 디렉터리 경로만 제공하면 됩니다.