如何通过 ReactJs 中的道具添加图像？答案

【问题标题】：How to add images via props in ReactJs?如何通过 ReactJs 中的道具添加图像？
【发布时间】：2021-05-24 16:18:16
【问题描述】：

我正在尝试通过 props 传递图像路径

require("./house.jpg");

但它给出了一个损坏的图像，我的图像的路径在 src 下。

我应该如何将图像路径传递给 React 中的道具？

const imagesrc =require("./house.jpg");

ReactDOM.render(
  <React.StrictMode>
    <Header /> 
    <HomeBanner width='100%' height='400px' alt="Banner image" src={imagesrc}  />
    <App />
  </React.StrictMode>,
  rootElement
)

File Structure

【问题讨论】：

src HomeBanner 的 props 的使用情况如何？

标签： reactjs require react-props

【解决方案1】：

最好将图片路径保存在单独的文件/对象中并导出，这样不会造成路径混淆，并且可以很容易地在 props 中传递。

例如：

const ASSETS_PATH = '../assets/img/';
const IMAGE = {
  LOGO: require(ASSETS_PATH + 'logo.png'),
};

export default IMAGE;

然后像这样传入

ReactDOM.render(
  <React.StrictMode>
    <Header /> 
    <HomeBanner width='100%' height='400px' alt="Banner image" src={IMAGE.LOGO}  />
    <App />
  </React.StrictMode>,
  rootElement
)

【讨论】：