React中找不到模块'./assets/photo.jpg'错误

Posted 2021-05-07

我遇到这样的错误，找不到模块'./assets/photo.jpg'。这是app.js中的代码

import ReactDOM from 'react-dom';
import './App.css';
import Intro from './components/Introduction'

function App() {
  return (
    <div className="outerwrapper">
      <div className="wrapper2">
     <Intro content={{ image : "./assets/photo.jpg",
     name : "Hello",
     text : "An undergraduate electrical and electronic engineering student"

    }} />      
 </div>

</div>

Introduction.js组件中的代码。我可以通过将图像的位置输入到require函数中来导入图像。如果没有require函数，也无法加载图像。

import React from 'react';


function Intro(props) {
    return (

       <div className="Intro">
           <img src={require(props.content.image)}/>
    <h1>{props.content.name}</h1>
    <p>{props.content.text}</p>
    </div>

)
}
export default Intro;

答案

尝试将图像导入为组件（正确的方式，需要图像-不良做法）

App.js

import Photo from './assets/photo.jpg'
...
<Intro content={{ 
   image : Photo, // pass Photo as prop
   name : "Hello",
   text : "An undergraduate electrical and electronic engineering student"
}} /> 

Intro.js

...
<img src={props.content.image}/>

另一答案

删除需求并保持路径'/assets/photo.jpg'react会自动重定向到Public文件夹。确保资产在“公共”下。