反应 JS。如何显示对象内部的图像？

Question

如何在React.js中显示对象内部的图像？

const Area = () =>{ 
 const flags = [
    { id: 1, name: "USA", image: "./us.png" },
    { id: 2, name: "Canada", image: "./ca.png" },
  ];

return (
    <div>
      {flags.map((area) => {
        return <img key={area.id} src={area.image} />;
      })}
    </div>
)}

Answer 1

正如我在评论中提到的，请仔细检查图像的路径。图像路径可能是一个问题，否则它看起来很好。此外，您可以按 ctrl + 单击路径以路由到该文件夹或手动检查它。

Answer 2

您可以在 object.But 中对图像使用 require，即使没有它，您的代码也能正常工作，您只需 return 在 return method() 中使用它。

  const Area = () =>{ 
  const flags = [
    { id: 1, name: "USA", image: require('./us.png') },
    { id: 2, name: "Canada", image: require('./ca.png') },
   ]

  return (
      <div>
          {flags.map((area) => 
          <img key={area.id} src={area.image} />
    )}
     </div>
   )
   }
   return(
   Area()
   )

这种方式也很好用

const Area = () =>{ 
const flags = [
  { id: 1, name: "USA", image: "./us.png" },
  { id: 2, name: "Canada", image: "./ca.png" },
]

return (
  <div>
    {flags.map((area) => 
     <img key={area.id} src={area.image} />
    )}
  </div>
 )
}
return(
Area()
 )

Answer 3

您需要做的第一件事是将 src 包装在您已经在做的 {} 中。

那么如果你使用 webpack。而不是：<img src={"./us.png"} />

你需要像这样使用require()<img src={require('./us.png')} />

 const Area = () => {
  const flags = [
    { id: 1, name: "USA", image: "./us.png" },
    { id: 2, name: "Canada", image: "./ca.png" },
  ]

return (
  <div>
    {flags.map((area) => {
      return <img key={area.id} src={require(area.image)} />;
    })}
  </div>
 )}
}

另一种选择是首先导入图像，如下所示

import ca from './us.png' 或 const us = require('./us.png).

然后将它们添加到您的 flags 对象中，如下所示：

import usa from './us.png;
import canada from './ca.png;

const Area = () => {
  const flags = [
   { id: 1, name: "USA", image: usa },
   { id: 2, name: "Canada", image: canada },
  ]

return (
   <div>
     {flags.map((area) => {
       return <img key={area.id} src={area.image} />;
     })}
   </div>
  )}
}

反应 JS。如何显示对象内部的图像？

React JS. How can I display the image inside the object?

javascript

object

reactjs

map-function

react-functional-component