Реагируйте: установка фонового изображения для файла, присутствующего на сервере - PullRequest
Новая
       24

Реагируйте: установка фонового изображения для файла, присутствующего на сервере

0 голосов
/ 12 июня 2019

Я хочу использовать фоновое изображение для моего сайта, созданного с использованием React.

Я включаю в файл .scss: 

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

и просто импортирую файл .scss в свой файл.index.jsx главная страница: 

import "styles/index.scss"

И это прекрасно работает

Но когда я использую то же изображение, сохраненное в моей папке, например: 

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

Iполучите следующее сообщение об ошибке в моем веб-клиенте: 

./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, я использую 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)

Ответы [ 2 ]

0 голосов
/ 12 июня 2019

Проблема возникла из-за того, что я использовал следующий, а не веб-пакет, что облегчает установку загрузчика, но менее документировано в Интернете.

Я установил библиотеку "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

0 голосов
/ 12 июня 2019

Пожалуйста, добавьте это в файл конфигурации вашего веб-пакета. Это может решить проблему загрузчика GIF. Пожалуйста, найдите эту ссылку для получения дополнительной информации 

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