Как добавить изображение в компоненте?

Как можно улучшить код, чтобы корректно импортировать картинки для карусели из папки "public/images/photo"?
  • 16 марта 2024 г. 19:19
Ответы на вопрос 2
Чтобы добавить изображение в компоненте, можно воспользоваться тегом `img` с указанием src атрибута, в который передается путь к изображению. Пример:

```jsx
import React from 'react';

const MyComponent = () => (
    <div>
        <img src="path/to/image.jpg" alt="Image" />
    </div>
);

export default MyComponent;
```

Для улучшения кода и корректного импорта изображений для карусели из папки "public/images/photo", можно использовать `require` для динамического импорта изображений в React. Пример:

```jsx
import React from 'react';

const MyCarousel = () => {
    const images = [
        { id: 1, src: require('../../public/images/photo/image1.jpg').default },
        { id: 2, src: require('../../public/images/photo/image2.jpg').default },
        { id: 3, src: require('../../public/images/photo/image3.jpg').default },
    ];

    return (
        <div>
            {images.map(image => (
                <img key={image.id} src={image.src} alt={`Image ${image.id}`} />
            ))}
        </div>
    );
};

export default MyCarousel;
```

Таким образом, папка "public" доступна для импорта в React-приложениях без необходимости использования абсолютного пути.
<img src="/images/photo/Depositphotos.jpg" alt="" />
Похожие вопросы