通过对象值传递本地图像文件路径到React prop不起作用？

Question

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

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

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

当我解构道具时，我能够将id、name、description和technology值传递给我的组件，它们可以很好地显示在应用程序上。当我将图像属性放在image标记的image source属性中时，图像不会显示。(我使用的是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>

Answer 1

从字面上看，您编写了一个包含内容"require('./React.png')"的字符串，这意味着它将作为src属性传递给<img>组件。由于该字符串不是有效的URL，因此不会显示任何内容。也许你的浏览器会显示一个错误。

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

第二种选择是将javascript代码中的图像导入到一个变量中，并将其传递给<img>标记的src属性。

例如：

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>
);

但这里有一个关键问题。因为看起来你想要动态地显示图片，我建议你选择选项1，而不是事先把图片作为捆绑包的一部分。只有图像是应用程序的固定部分才能做到这一点，比如图标或徽标。

动态(内容)图像应由web服务器提供。

Answer 2

如果JSON中的图像为以下内容，则将值更改为：

{
  ...
  image: require('./React.png'),
  ...
}

<img style={{ width: 300 }} src={ props.image } />