我遇到这样的错误,找不到模块'./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;
答案 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”的反应将自动重定向到公用文件夹。 确保资产处于公开状态。