В ReactJS отображение изображений является общим требованием при создании веб-приложений. Одним из важнейших аспектов является передача пути к изображению в атрибут srcHTML-тега img. В этой статье мы рассмотрим несколько методов выполнения этой задачи, а также приведем примеры кода.

Методы:

Метод 1: импорт изображения
Один из подходов — импортировать изображение непосредственно в файл компонента React. Этот метод полезен для изображений меньшего размера или если вы хотите воспользоваться преимуществами объединения и оптимизации, предоставляемыми такими инструментами, как веб-пакет.

Пример кода:

import React from 'react';
import MyImage from './path/to/image.jpg';
const MyComponent = () => {
  return <img src={MyImage} alt="My Image" />;
};
export default MyComponent;

Метод 2: использование относительного пути
Если у вас есть изображение, хранящееся в общей папке или подкаталоге, вы можете указать относительный путь к изображению в атрибуте src.р>

Пример кода:

import React from 'react';
const MyComponent = () => {
  const imagePath = '/images/my-image.jpg';
  return <img src={process.env.PUBLIC_URL + imagePath} alt="My Image" />;
};
export default MyComponent;

Метод 3: сохранение путей к изображениям в состоянии или реквизитах
Вы можете сохранить путь к изображению в состоянии компонента или получить его в качестве свойства от родительского компонента. Этот подход полезен, когда вам нужен динамический рендеринг изображений на основе взаимодействия с пользователем или данных API.

Пример кода:

import React, { useState } from 'react';
const MyComponent = () => {
  const [imagePath, setImagePath] = useState('/images/my-image.jpg');
  return <img src={imagePath} alt="My Image" />;
};
export default MyComponent;

Метод 4. Получение путей к изображениям из API
Если ваши пути к изображениям извлекаются из API, вы можете выполнить асинхронный вызов, используя такие библиотеки, как Axios, или встроенный API-интерфейс извлечения.

Пример кода:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
const MyComponent = () => {
  const [imagePath, setImagePath] = useState('');
  useEffect(() => {
    axios.get('/api/image-path')
      .then(response => setImagePath(response.data.path))
      .catch(error => console.error(error));
  }, []);
  return <img src={imagePath} alt="My Image" />;
};
export default MyComponent;