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

时间:2019-12-14 07:32:55

标签: javascript reactjs image import

我遇到这样的错误,找不到模块'./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;

2 个答案:

答案 0 :(得分:0)

尝试将图像导入为组件(正确的方式,需要图像-不好的做法)

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}/>

答案 1 :(得分:0)

删除需求并保持路径“ /assets/photo.jpg”的反应将自动重定向到公用文件夹。 确保资产处于公开状态。