Как вывести изображение, полученное из бэкенда на основе Nest и Next.js?

Question

RadiantPhoenix

nestjs , react , фронтенд , nextjs

Как вывести изображение, полученное из бэкенда на основе Nest и Next.js?

Почему файл успешно загружается на сервер, но его невозможно получить на фронте из-за ошибки 404, если он действительно существует? Также в чем может быть проблема с настройкой в файле next.config.mjs? Ниже приведен код конфигурации: <br/> <pre><code class="javascript">/** @type {import('next').NextConfig} */
const nextConfig = {
    env: {
        SERVER_URL: process.env.APP_SERVER,
        APP_URL: process.env.APP_URL
    },
    async rewrites() {
        return [
            {
                source: '/static/:path*', //куда подгружаем
                destination: `${process.env.APP_SERVER}/static/:path*`
            }
        ]
    }
};

export default nextConfig;</code></pre> <br/> <br/> В компоненте я использую следующий код для вывода: <br/> <pre><code class="javascript">&lt;Image  src={ userFullData.avatar ? userFullData.avatar : '/images/not-avatar.png'}  alt={profile.login} fill unoptimized className='rounded-md' /&gt;</code></pre> <br/> <br/>

9 сентября 2024 г. 18:43

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

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

Answer 1

Проблема, с которой вы сталкиваетесь, может быть вызвана несколькими аспектами, включая неправильные пути, конфигурацию API и доступ к статическим ресурсам. Давайте разберем ваши вопросы шаг за шагом.

### 1. Ошибка 404

Если вы видите ошибку 404 при попытке загрузить изображение, это может быть связано с рядом причин:

- **Неверный путь к изображению**: Убедитесь, что путь, по которому вы пытаетесь получить изображение, действительно соответствует тому, по которому файл сохранен на сервере. Часто проблема в неправильно указанной части URL.

- **CORS (Cross-Origin Resource Sharing)**: Убедитесь, что ваш сервер, написанный на Nest.js, настроен для обработки запросов из вашего приложения на Next.js. Проверьте настройки CORS на сервере.

- **Ошибка в маршрутизации**: Возможно, ваш Nest.js сервер не настроен для обработки статических файлов в нужном маршруте.

### 2. Настройка в `next.config.mjs`

Ваша конфигурация `next.config.mjs` выглядит в целом правильно с точки зрения перенаправления. Однако вот несколько вещей, которые вы можете проверить:

- **Путь к статическим файлам**: Убедитесь, что путь `/static/:path*` соответствует тому, как вы размещаете изображения на сервере. Например, если ваши изображения находятся по адресу `/uploads/images/` на сервере, то вам нужно скорректировать путь.

- **Переменные окружения**: Убедитесь, что `process.env.APP_SERVER` и `process.env.APP_URL` правильно настроены и доступны во время выполнения.

- **Корректное использование `rewrites`**: Проверьте, что `rewrites` действительно срабатывают, добавив логирование или проверив сетевые запросы.

### 3. Вывод изображения

Ваш код вывода изображения:

```javascript
<Image
src={userFullData.avatar ? userFullData.avatar : '/images/not-avatar.png'}
alt={profile.login}
fill
unoptimized
className='rounded-md'
/>
```

Убедитесь, что значение `userFullData.avatar` — это корректный URL. Если `server_url` указывает на `APP_SERVER`, убедитесь, что изображение имеет полный путь:

```javascript
<Image
src={userFullData.avatar ? `${process.env.APP_URL}${userFullData.avatar}` : '/images/not-avatar.png'}
alt={profile.login}
fill
unoptimized
className='rounded-md'
/>
```

Если `userFullData.avatar` содержит относительный путь к изображению, то это также может вызвать ошибки 404.

### Подсуммируем:

1. Проверьте корректность URL для загрузки изображений.
2. Убедитесь в настройках CORS на сервере.
3. Проверьте правильность работы `rewrites` в `next.config.mjs`.
4. Убедитесь, что вы передаете полный путь к изображению в компоненте `<Image>`.

Если после всех этих проверок проблема не решится, вы можете рассмотреть возможность добавления логов на сервере и клиенте, чтобы лучше понимать, где конкретно происходит сбой.