0

我有图像问题。我正在开发一个使用 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"
            }
        ]
    }

反应组件

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
4

1 回答 1

1

我不敢相信它是如此简单，这有点尴尬，但我会在这里写下解决方案，以防将来有人需要。

我在 config.yml 上使用我的源图像文件夹，例如： media_folder: "media/uploads"

所以我发现它需要是公用文件夹中的一个文件夹，所以现在我正在使用： media_folder: "public/images" public_folder: /images

于 2020-11-23T20:19:58.050 回答