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”

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

next.js 文件加载器问题，从 JSON 文件加载图像 (netlify cms)

issue with next.js file-loader, load image from JSON file (netlify cms)

json

next.js

webpack-file-loader

netlify-cms

next-images