Issue with next.js file-loader, load image from JSON file

Netlify CMS
1

I’m having an issue with images. I’m working on a project that uses Next.js, and Netlify CMS, which allows you use a CMS to upload content and images and it generates a JSON file, and I’m consuming this JSON file on my component. Everything is working perfect, unless the image, it seems like the image is not passing through the file loader, I’m already using the file-loader to load other images directly from the images directory, and I am having no issue with that, the images that are loading fine are compiling with paths like that: “/_next/static/images/casas-083c89cdc2d9494c0b142690d978a8d4.png” And the image coming from the JSON file are not passing through the file loader I think, they are “compiling” like that “/images/uploads/comercial.jpg”.

Does anyone know how to help me?

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 Component

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

I’m almost giving up and restarting the project without using next.js (only with react), maybe it works.
Because I searched everywhere and I didn’t find any solution :sob:

2

I can’t believe it was so simple, it is kind of embarrassing :woman_facepalming: but I’ll write the solution here in case someone needs on the future.

I was using my source image folder on config.yml, like:
media_folder: “media/uploads”

So I discovered that it needs to be a folder inside the public folder, so now I’m using:
media_folder: “public/images”
public_folder: /images

1 Like