javascript - 使用 props 设置图片 src

Question

当我尝试使用 props 设置图像的 src 时出现错误。

我搜索了很多解决这个问题的方法，但所有这些都将我带到了 require()，然后在其中设置了 props。但是，它对我不起作用。

图片路径是正确的，因为当我使用 import 方法设置图片的 src 时，它起作用了。但是我需要很多“ProjectCard()”组件，props 解决方案更好。

包含图像的组件:

import React from 'react';

const ProjectCard = (props) => (
    <div>
        <img src={ require(props.image).default } />
    </div>
);

export default ProjectCard;

它正在导入 ProjectCard() 的组件:

import React from 'react';    
import ProjectCard from './components/ProjectCard/';

const App = () => (
    <ProjectCard image="../../images/image.jpg" />
);

export default App;

我也尝试过这个解决方案，但效果不佳(使用单引号):

<ProjectCard image="'../../images/image.jpg'" />

两种尝试，我都得到同样的错误:

Error: Cannot find module '../../assets/image.jpg'

我使用了 create-react-app。

Answer 1

公共(public)文件夹

考虑到您有一个结构如下的公用文件夹，

- public
   |- images
       |- image.jpg

您可以这样构造您的组件:

const App = () => (
    <ProjectCard image="image.jpg" />
);

const ProjectCard = (props) => (
    <div>
        <img src={`images/${props.image}`} />
    </div>
);

您的图像路径将是公用文件夹的绝对路径，如 images/image.jpg

---

SRC 文件夹

另一方面，如果您的 src 文件夹中有图像，如下所示，

- src
   |- components
       |- ProjectCard.jsx
   |- images
       |- image.jpg
   App.jsx

您可以这样构造您的组件:

import image from "./images/image.jpg";

const App = () => (
    <ProjectCard image={image} />
);

const ProjectCard = (props) => (
    <div>
        <img src={props.image} />
    </div>
);