next.js 文件加载器的问题，从 JSON 文件加载图像（netlify cms）答案

【问题标题】：issue with next.js file-loader, load image from JSON file (netlify cms)next.js 文件加载器的问题，从 JSON 文件加载图像（netlify cms）
【发布时间】：2021-03-04 08:32:04
【问题描述】：

我遇到了图片问题。我正在开发一个使用 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

【问题讨论】：

好吧，我想我要放弃了，我没有找到任何关于这个问题的信息，我想我会在没有 next.js 的情况下重新启动项目，并且只使用 react :(

标签： json next.js webpack-file-loader netlify-cms next-images

【解决方案1】：

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

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

所以我发现它需要是公用文件夹中的一个文件夹，所以现在我正在使用： media_folder：“公共/图像” 公共文件夹：/图像

【讨论】：