Как использовать изображение в React, используя компоненты классов?

Question

Глеб

react , обработка-изображений

Как использовать изображение в React, используя компоненты классов?

Почему изображение не отображается, когда передается через `src={this.props.cover}` вместо жестко заданного пути, такого как `'/image/lich.jpg'`, в React-приложении, созданном с использованием create-react-app? Как можно обойти эту проблему, если количество изображений велико, и жестко задавать пути нереально?

25 мая 2024 г. 8:01

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для использования изображения в React с помощью компонентов классов, вы можете использовать тег `<img>` и передавать путь к изображению как атрибут `src` через `props`. Вот пример компонента класса, который отображает изображение:

```jsx
import React, { Component } from 'react';

class ImageComponent extends Component {
  render() {
    return (
      <img src={this.props.cover} alt="Cover" />
    );
  }
}

export default ImageComponent;
```

Чтобы решить проблему с отображением изображения, когда его путь передается через `this.props.cover`, а не жестко заданный путь, вам нужно учитывать то, что в приложениях React, созданных с использованием create-react-app, изображения в папке `src` автоматически копируются в папку `public` во время сборки проекта. Это означает, что пути к изображениям, указанные относительно папки `src`, не будут работать на этапе разработки.

Для решения этой проблемы, вам нужно использовать `process.env.PUBLIC_URL` в пути к изображению. Например, вместо того, чтобы передавать `'/image/lich.jpg'` как путь, вы можете передать `process.env.PUBLIC_URL + '/image/lich.jpg'`. 

Если у вас много изображений и жестко указывать пути к ним нецелесообразно, вы можете создать отдельный JSON-файл или объект в вашем проекте, где вы будете хранить пути к изображениям. Затем вы можете передавать ключ или путь к изображению через `props` и использовать его в вашем компоненте.

Например, вы можете создать JSON-файл `images.json` со следующим содержимым:

```json
{
  "image1": "/image/lich.jpg",
  "image2": "/image/dragon.jpg",
  ...
}
```

Затем вы можете импортировать этот JSON-файл в ваш компонент и передавать путь к изображению через `props`. 

```jsx
import React, { Component } from 'react';
import images from './images.json';

class ImageComponent extends Component {
  render() {
    return (
      <img src={process.env.PUBLIC_URL + images[this.props.imageKey]} alt="Cover" />
    );
  }
}

export default ImageComponent;
```

Таким образом, вы сможете управлять путями к изображениям централизованно и избежать проблем с отображением изображений в вашем React-приложении.