分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了使用地图在 React 中渲染多个图像更新，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决使用地图在 React 中渲染多个图像更新？

开发过程中遇到使用地图在 React 中渲染多个图像更新的问题如何解决？下面主要结合日常开发的经验，给出你关于使用地图在 React 中渲染多个图像更新的解决方法建议，希望对你解决使用地图在 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'},...

data(category) 定义在 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;

Home comp 是：

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() 在沙箱中工作，本地不工作。

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

解决方法

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

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

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

编辑：您能确认您的浏览器路径正确吗？尝试按照评论中的规定打开网络标签。

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

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

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

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

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

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

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

{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,link }) => (
        <li key={iD}>
          <span>{titlE}</span>
          <div className="img-container">
            <img src={img} alt={titlE}></img>
          </div>
        </li>
      ))}
    </div>
  );
};

Edit sharp-stonebraker-wm2op

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

enter image description here

代码：

data.js

const data = [
  {
    id: 1,title: "cizme",img: require("./images/cat1.jpg"),link: "./cizme"
  },{
    id: 2,img: require("./images/cat2.jpg"),{
    id: 3,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,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>
  );
}