проблема с загрузчиком файла next.js, загрузить изображение из файла JSON (netlify cms)

Question

У меня проблема с изображениями. Я работаю над проектом, который использует Next.js и Netlify CMS, который позволяет использовать CMS для загрузки контента и изображений и генерирует файл JSON, и я использую этот файл JSON в своем компоненте. Все работает идеально, если только изображение, кажется, не проходит через загрузчик файлов, я уже использую загрузчик файлов для загрузки других изображений непосредственно из каталога изображений, и у меня нет проблем с этим, изображения, которые загружаются нормально, компилируются с такими путями: "/_next/static/images/casas-083c89cdc2d9494c0b142690d978a8d4.png" И изображение, поступающее из файла JSON, не проходит через загрузчик файлов, я думаю, они "компилируются" вот так "/images/uploads/comercial.jpg".

Кто-нибудь знает, как мне помочь?

next.config.js

 const withImages = require('next-images')
    
    module.exports = withImages({
        module: {
            rules: [
                {
                    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/i,
                    use: [
                        {
                            loader: 'file-loader'
                        },
                    ],
                },
            ],
        },
    })

JSON

    {
        "obrasConcluidas": [
            {
                "nome": "casa 1",
                "metragem": 245,
                "arquiteto": "João da Silva",
                "thumbnail": "/images/uploads/comercial.jpg"
            },
            {
                "nome": "casa 2",
                "metragem": 789,
                "arquiteto": "Maria Ferreira",
                "thumbnail": "/images/uploads/comercial.jpg"
            },
            {
                "nome": "casa 3",
                "metragem": 555,
                "arquiteto": "Renata Souza",
                "thumbnail": "/images/uploads/comercial.jpg"
            },
            {
                "nome": "casa 4",
                "metragem": 123,
                "arquiteto": "Newton Massafume",
                "thumbnail": "/images/uploads/comercial.jpg"
            },
            {
                "nome": "casa 5",
                "metragem": 566,
                "arquiteto": "Fulano de Tal",
                "thumbnail": "/images/uploads/comercial.jpg"
            }
        ]
    }

Компонент React

import BaseLayout from '../../components/layout/BaseLayout'
import ObraConcluida from '../../components/shared/ObraConcluida'
import PageTitle from '../../components/shared/PageTitle'
import data from '../../data/casas/obras-concluidas.json'

const ObrasConcluidas = () => {

    const obras = data.obrasConcluidas

    return (
        <BaseLayout section="casas">
            <div className="steel-container my-4">
                <PageTitle color="light">
                    obras
                <br></br>
                concluídas.
            </PageTitle>
                <div>
                    {obras && obras.map(obra => (
                        <ObraConcluida
                            nome={obra.nome}
                            thumb={obra.thumbnail}
                            metragem={obra.metragem}
                            arquiteto={obra.arquiteto}
                        />
                    ))}
                </div>
            </div>
        </BaseLayout>
    )
}

export default ObrasConcluidas

Answer 1

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

Я использовал папку с исходными изображениями на config.yml, например: media_folder: "media/uploads"

Итак, я обнаружил, что это должна быть папка внутри общей папки, поэтому теперь я использую: media_folder: "public/images" public_folder: /images