时间戳

首页 > 解决方案 > 使用地图在 React 中渲染多个图像

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

问题描述

我有带有键 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

标签： reactjs

解决方案

您当前的方法不起作用（除非您必须通过循环导入图像），因为您已将这些图像保存在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文件夹内。

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

推荐阅读