0

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
Natacha Romano
  • 21
  • 3
  • Well, I think I'm gonna give up, I didn't find any information about this issue, I think I'm gonna restart the project without next.js, and use only react :( – Natacha Romano Nov 23 '20 at 14:33

1 Answers1

2

I can't believe it was so simple, it is kind of embarrassing but I'll write the solution here in case someone needs in 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

Natacha Romano
  • 21
  • 3