javascript - 如何使用拼贴组件在 react 中动态加载图像

Question

在加载图像时，似乎所有示例都是静态的。尽管此代码有效，但它似乎没有在显示结果(图像)时呈现分隔符

标记，而是堆叠到拼贴画的第一项中。我使用的组件是 react-multi-carousel，它使用分隔符标签来分隔要呈现的项目。

<Carousel responsive={responsive}>
         <ul>
                {images.map(image => {    
                    return <div><img key={image} src={image}/></div>;
                  })}
          </ul>
  
</Carousel>;

这一定是一个简单的修复，但我似乎无法找到答案。任何帮助，将不胜感激。
谢谢

最佳答案

好吧，我复制了您的代码并做了一些更改。我的代码呈现 <div> 标记。

const [images, setimages] = useState([
    "https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-1.2.1&w=1000&q=80",
    "https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg"
  ]);
  console.log(images);

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

关于javascript - 如何使用拼贴组件在 react 中动态加载图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64124559/

Answer 1

好吧，我复制了您的代码并做了一些更改。我的代码呈现 <div> 标记。

const [images, setimages] = useState([
    "https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-1.2.1&w=1000&q=80",
    "https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg"
  ]);
  console.log(images);

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