React：為服務器上的文件設置背景圖像

Question

我想為使用React構建的網站使用背景圖片。

我包含在.scss文件中：

html {  
    background-color: #FFFCB2;
    background-image: url(https://mdn.mozillademos.org/files/11991/startransparent.gif);
}

我只是在index.jsx主頁中導入.scss文件：

import "styles/index.scss"

而且效果很好

但是當我使用保存在我的文件夾中的相同圖像時，如下所示：

html {  
    background-color: #FFFCB2;
    background-image: url(../static/images/startransparent.gif);
}

我在我的Web客戶端中獲取以下錯誤消息：

./styles/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '' (1:6)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

大多數對此錯誤消息的引用（如本文中所述 ）都是指在我的webpack.config中包含一系列指令。

但是我的主體系結構中沒有webpack.config，我使用的是babel（我不確定這兩個事實是如何連接的，我不熟悉JS）。 所以我不知道在哪里應用這個。

如何從本地正確加載圖像？ 如果我的項目中沒有webpack.config文件怎么辦？

**編輯：似乎我缺少webpack.config來自我正在使用的事實。 **

我當前的next.config.js文件：

const withTranspileModules = require("next-transpile-modules")
const withTypescript = require("@zeit/next-typescript")
const withSass = require("@zeit/next-sass")

const _ = require("lodash")

const config = {
    exportPathMap() {
        return {
            "/": { page: "/" },
        }
    },
    distDir: "build",
    transpileModules: ["@iconify/react"],
}

module.exports = _.flow([,withTranspileModules, withTypescript, withSass])(config)

Answer 1

請將其添加到您的webpack配置文件中。 它可以解決gif加載器問題。 請查找此鏈接以獲取更多參考

  {
                test: /\.(ttf|eot|svg|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                include: SRC,
                use: [{
                    loader: 'file-loader'
                }]
            }]
        },

Answer 2

問題起因於我使用的是next而不是webpack，這使得它在某種程度上更容易安裝加載程序，但在Internet上記錄較少。

我安裝了“next-images”庫，並將next.config.js更改為以下內容：

const withTranspileModules = require("next-transpile-modules")
const withTypescript = require("@zeit/next-typescript")
const withSass = require("@zeit/next-sass")
const withImages = require('next-images');

const _ = require("lodash")

const config = {
    exportPathMap() {
        return {
            "/": { page: "/" },
        }
    },
    distDir: "build",
    transpileModules: ["@iconify/react"],
}

module.exports = _.flow([withTranspileModules, withTypescript, withSass,withImages])(config)

我受到了這個 github問題中出現的解決方案的啟發