如何使用 PROPS 在 React js 中使用本地机器映像答案

【问题标题】：How to use local machine image in react js using PROPS如何使用 PROPS 在 React js 中使用本地机器映像
【发布时间】：2021-08-04 06:02:18
【问题描述】：

我想使用道具渲染我的本地机器图像。我是初学者，所以请用最简单的方法帮助我。提前致谢。

我导出我的 card.js 并在 App.js 中渲染

App.js 代码如下

从“反应”导入反应；从“./card”导入卡片；从“./img/imge.jpg”导入标志；
    const App = () => {
        return(
            <>
            <Card img= {require('./img/imge.jpg')}/>
            </>
        )
    }
    
    export default App;

下面的 Card.js 代码

从“反应”导入反应；

const Card = ({img}) => (
    <>
    <p>my name is {img}</p>
    </>
)
export default Card;

【问题讨论】：

你在使用create-react-app吗？
图片上有你的名字吗？
你的项目的目标是什么？
你好，你看我的回答了吗？
你好，@Ranjan_bastia 你的图片文件在哪里？你能告诉我你的文件结构吗？

标签： reactjs react-props

【解决方案1】：

我认为主要问题是文件夹结构。请检查我的代码框。

App.js

            <>
               <Card img= {require('./img/image.png')}/>
            </>

card.js

    <p>my name is <img src={img} alt="myname" width="300px"/></p>

代码沙盒网址

https://codesandbox.io/s/dreamy-kare-iw5jt?file=/src/App.js:126-166

【讨论】：

我只能看到 alt 而不是图像。

【解决方案2】：

App.js

import MyImage from "./path/to/image.jpg"
import React from "react";
import Card from "./card"; 
import logo from "./img/imge.jpg";

const App = () => <Card img= {logo}/>;

export default App;

卡片.js

const Card = ({img}) => <p>my name is <img src="{img}"/></p>;

export default Card;

【讨论】：