如何在反应中使用道具显示图像？答案

【问题标题】：How to display images using props in react?如何在反应中使用道具显示图像？
【发布时间】：2022-03-04 16:22:44
【问题描述】：

我是 React 新手，我正在学习教程。现在我有以下代码：

index.js：

import ReactDOM from "react-dom"
import App from "./App"

ReactDOM.render(
    <App />,
    document.getElementById("root")
)

App.js：

import Contact from "./components/Contact"
export default function App() {
    return (
        <div className="contacts">
            <Contact
                img="../images/mr-whiskerson.png"
                name="Mr. Whiskerson"
                phone="(111) 111-1111"
                email="mr.whiskaz@catnap.meow"
            />
    )
}

Contact.js：

import React from "react"
import ReactDOM from "react-dom"

export default function Contact(props) {
return (
        < div className="contact-card" >
            <img src={props.img} />
            <h3>{props.name}</h3>
            <div className="info-group">
                <img src="../images/phone-icon.png" />
                <p>{props.phone}</p>
            </div>
            <div className="info-group">
                <img src="../images/mail-icon.png" />
                <p>{props.email}</p>
            </div>
        </div >
    )
}

以上所有文件的结构如下：

我的问题是我似乎无法显示图像：

这正是教程的内容，我知道图像目录是正确的，因为如果我像这样在 Contact 组件上硬编码“mr-whiskerson.png”的目录

..图像显示

所以我的问题是，我有什么遗漏吗？我是否需要使用特殊语法来显示不用于显示段落的图像？老实说，我很困惑，我非常感谢那些可以帮助我理解的人。谢谢。

【问题讨论】：

代码看起来正确....尝试将 alt 属性添加到图像
我觉得你的文件路径不对
查看类似问题的答案：stackoverflow.com/questions/48385073/…

标签： javascript html reactjs

【解决方案1】：

如果您将路径作为字符串传递给组件，您的组件将接收该相对路径，但相对于父组件。它不会工作。

您应该在 App.js 的导入部分中导入图像的路径：

import Contact from "./components/Contact"
import yourImage from "../images/mr-whiskerson.png";

export default function App() {
    return (
        <div className="contacts">
            <Contact
                img={yourImage}
                name="Mr. Whiskerson"
                phone="(111) 111-1111"
                email="mr.whiskaz@catnap.meow"
            />
    )
}

在这种情况下，您的路径将作为指针正确传递到另一个组件中（在它应该存在的级别中）。

保持 Contact.js 文件不变，它应该可以工作。

【讨论】：

【解决方案2】：

在你的 structur 文件夹 images 和 App.js 文件中的一个结构中，你只需要在 App.js 中传递图像 url

./images/phone-icon.png

【讨论】：

【解决方案3】：

我认为这里没有人能得到你想要做的事情。您想使用道具注入图像，因为这是您正在学习的课程，而不是使用“导入”。试试这个：

将这些图像从“src”文件夹移动到“public”文件夹
在引用“App.js”文件中的图像时，请确保路径是相对于“index.html”的，因为那是它们实际显示的位置（即 img="./images/mr-whiskerson.png )
删除所有图像的“导入” - 使用图像道具时不需要它们

【讨论】：