Как динамически загружать изображения в react с помощью компонента Collage

#javascript #node.js #reactjs #sequelize.js

Вопрос:

Похоже, что все примеры статичны, когда дело доходит до загрузки изображений. Хотя этот код работает, он, похоже, не отображает разделитель <div> тег при отображении результатов (изображений), а складывается в первый элемент коллажа. Компонент, который я использую, — это react-multi-carousel, который использует разделительный тег для разделения элементов для рендеринга.

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

Это должно быть простое решение, но, похоже, я не могу найти ответ. Любая помощь будет оценена.

Спасибо

1. Похоже, это добавляет тег div. Однако Карусель, похоже, не знает, что мне нужны два элемента. Но теперь между изображениями есть пробел, используя это: «{images.map(image => { return ([ <div>, <img key={image} src={image}/>, </div>]); })}«

Ответ №1:

Ну, я скопировал ваш код и внес некоторые изменения.Мой код отображает <div> тег.

 const [images, setimages] = useState([
    "https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-1.2.1amp;w=1000amp;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>
        );
      })}
    </>
  );