Arrays 是否通过对象值传递本地图像文件路径以响应不工作？

我有一个文件，其中包含一组具有以下值的对象：

{
  id: .., 
  image: "require('./React.png')",
  name: ...,
  description:...,
  technology:..,
},

image

值包含要用作字符串的图像文件的文件路径。该映像与我的组件和对象文件位于同一目录中

当我解构道具时，我能够将

id

、

名称

、

说明

、和

技术

值传递给我的组件，并在应用程序上显示。当我将图像道具放置在图像标记内的图像源属性内时，图像不会显示。（我正在使用JSX）

我试着像这样传递图像道具：

{this.props.image}

/

{props.image}

，但没有效果

最后一个p标记包含我试图传递到图像源的同一图像属性，它以字符串形式显示到文件的路径：

“require（'./React.png'）”

。因此，我知道道具正在正确访问对象值。由于某种原因，图像源属性刚刚适合。任何帮助都将不胜感激。谢谢

const ProjectCard =({image, name, description, technolgy})=>{

  return(

    <div className='pa3 dib br2 ma2 bw2 shadow-5 grow tc'>

      <img src={{image}} style={{width:"60px", height:"60px"}} alt='logo'/>

      <div>
        <h2>{name}</h2>
        <p>{description}</p>
        <p>{technolgy}</p>
        <p>{image}</p>
      </div>
    </div>

constprojectcard=（{image，name，description，technology}）=>{
返回(
{name}
{说明}

{技术}

{image}

好吧，您确实编写了一个字符串，内容为

“require（'./React.png'）”

，这意味着该字符串将传递到

属性。由于该字符串不是有效的URL，因此不会显示任何内容。您的浏览器可能会显示错误

您有两种选择。您可以通过从字符串中删除
require
，将字符串修改为正确的URL；例如，您可以将其更改为
“/React.png”
。但是，您需要配置后端以实际为您提供此图像

选项二是将javascript代码中的图像导入变量，并将其传递给
src的
property
{name}
{说明}

{技术}

{image}

);

但这里有一个陷阱。因为看起来您正在尝试动态显示图像，我建议您使用选项1，不要事先将图像作为捆绑包的一部分。只使用作为应用程序固定部分的图像，如图标或徽标

动态（内容）图像应该从web服务器提供。
好吧，您确实用内容
编写了一个字符串“require（'./React.png'）”
，这意味着该字符串将传递到
属性。由于该字符串不是有效的URL，因此不会显示任何内容。您的浏览器可能会显示错误

您有两种选择。您可以通过从字符串中删除
require
，将字符串修改为正确的URL；例如，您可以将其更改为
“/React.png”
。但是，您需要配置后端以实际为您提供此图像

选项二是将javascript代码中的图像导入变量，并将其传递给
src的
property
{name}
{说明}

{技术}

{image}

);

但这里有一个陷阱。因为看起来您正在尝试动态显示图像，我建议您使用选项1，不要事先将图像作为捆绑包的一部分。只使用作为应用程序固定部分的图像，如图标或徽标

应通过web服务器提供动态（内容）图像。
如果将JSON中的图像更改为：

import reactImage from './React.png';

const ProjectCard =({name, description, technolgy})=> (
  <div className='pa3 dib br2 ma2 bw2 shadow-5 grow tc'>
    <img src={{reactImage}} style={{width:"60px", height:"60px"}} alt='logo'/>
    <div>
      <h2>{name}</h2>
      <p>{description}</p>
      <p>{technolgy}</p>
      <p>{image}</p>
    </div>
  </div>
);

{
...
image:require（'./React.png'），
...
}
如果将JSON中的图像更改为：

import reactImage from './React.png';

const ProjectCard =({name, description, technolgy})=> (
  <div className='pa3 dib br2 ma2 bw2 shadow-5 grow tc'>
    <img src={{reactImage}} style={{width:"60px", height:"60px"}} alt='logo'/>
    <div>
      <h2>{name}</h2>
      <p>{description}</p>
      <p>{technolgy}</p>
      <p>{image}</p>
    </div>
  </div>
);

{
...
image:require（'./React.png'），
...
}
您没有描述如何执行选项1，即如何“配置后端为您实际提供此映像”。是的，因为这完全取决于您的后端类型。您没有描述如何执行选项1，即如何“配置后端为您实际提供此映像”。是的，因为它完全取决于您的后端类型。