使用地图在 React 中渲染多个图像

Question

我有带有键 img 的对象，值是放置在 src 文件夹“/images”中的图像文件夹的相对路径。我正在使用 map 循环解构数据，并使用这样的简单模板将其添加到 DOM：

<div key={id}>

<img src={img + '.jpg'} alt='{title}' />
</div>

我的数据对象如下所示：

const category = [
  {
    id: 1,
    title: 'cizme',
    img: './images/cizme',
    link: './cizme'},
...

数据（类别）在App组件中定义

import data from './data';
import Home from './Home';
import logo from './images/logo_fin-01.png';

import Navbar from './Navbar';

function App() {
  return (
    <div className='App'>
      <Navbar logo={logo} />
      <Home data={data} />
    </div>
  );
}

export default App;

而主场比赛是：

const Home = ({ data }) => {
  return (
    <div className='kat'>
      {data.map(({ id, title, img, link }) => (
        <li key={id}>
          <span>{title}</span>
          <div className='img-container'>
            <img src={img + '.jpg'} alt={title}></img>
          </div>
        </li>
      ))}
    </div>
  );
};

export default Home;

现在，在浏览器路径中显示正确，没有错误，但它说图像'无法加载图像'。我试图将图像文件夹复制到公共但然后我得到错误'它超出范围或类似这个（我忘了）'。那我该怎么办？

更新： require() 在沙盒中工作，localy 不行。

https://codesandbox.io/embed/zealous-christian-0j3v3?fontsize=14&hidenavigation=1&theme=dark

Answer 1

您当前的方法不起作用（除非您必须通过循环导入图像），因为您已将这些图像保存在 src 文件夹中。通过将图像 url 保持为相对于当前文件夹将不起作用，因为当将 URL 传递给 src（而不是导入的图像）时，您的浏览器开始呈现，img 的src 属性将看起来尊重到 URL，而不是加载和执行 javascript 文件的文件夹。

换句话说，如果我为这个映射的图像路由提供服务的组件位于 URL xyz.com/something/currentScreen，那么 './images/cizme' + '.jpg' 将转换为不存在的 xyz.com/something/images/cizme.jpg。

由于您正在尝试动态呈现这些图像，一个好方法是将它们放在 public 文件夹中（然后放在“图像”文件夹中，因为您的 URL 是这样说的），然后有 '/images/cizme' + '.jpg' 哪个将导致xyz.com/images/cizme.jpg 正确加载，因为它们存在于public 文件夹中。

编辑：你能确认你的浏览器路径是正确的吗？尝试按照 cmets 中的说明打开网络选项卡。

Answer 2

我假设由于您的 category 数组指定了它在编译时生成的本地/相对路径（而不是在运行时生成的一些动态值），因此，将可以访问位于src源目录。

您可以导入所有图像并在category 数组中指定它们。

import img1 from './images/cizme.jpg';
...

const category = [
  {
    id: 1,
    title: 'cizme',
    img: img1,
    link: './cizme'
  },
...

或者由于明确列出所有导入是不切实际的，您可以只在数据中要求它们。

const category = [
  {
    id: 1,
    title: 'cizme',
    img: require('./images/cizme.jpg'),
    link: './cizme'
  },
...

然后你就可以正常渲染图像了。

{category.map(({ id, img, title}) => (
  <div key={id}>
    <img src={img} alt='{title}' />
  </div>
))}

更新

我更新了我的链接代码框以反映您的代码。如果导出的data 使用require 拉入图像，那么Home 可以简单地将img 值附加到src 属性。

const Home = ({ data }) => {
  return (
    <div className="kat">
      {data.map(({ id, title, img, link }) => (
        <li key={id}>
          <span>{title}</span>
          <div className="img-container">
            <img src={img} alt={title}></img>
          </div>
        </li>
      ))}
    </div>
  );
};

以src 的“./images”目录中的 cat1.jpg、cat2.jpg 和 cat3.jpg 图像为例。

代码：

数据.js

const data = [
  {
    id: 1,
    title: "cizme",
    img: require("./images/cat1.jpg"),
    link: "./cizme"
  },
  {
    id: 2,
    title: "cizme",
    img: require("./images/cat2.jpg"),
    link: "./cizme"
  },
  {
    id: 3,
    title: "cizme",
    img: require("./images/cat3.jpg"),
    link: "./cizme"
  }
];

export default data;

App.js

import data from "./data";

const Home = ({ data }) => {
  return (
    <div className="kat">
      {data.map(({ id, title, img, link }) => (
        <li key={id}>
          <span>{title}</span>
          <div className="img-container">
            <img src={img} alt={title}></img>
          </div>
        </li>
      ))}
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Edit to see some magic happen!</h2>

      <Home data={data} />
    </div>
  );
}