React : setting background image for a file present on the server

Question

I want to use a background image for my website built using React.

I include in the .scss file :

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

and I just import the .scss file in my index.jsx main page :

import "styles/index.scss"

And it works perfectly

But when I use the same image saved on my folder, like this :

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

I obtain the following error message in my web client :

./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)

Most of the references to this error message (like in this post) refer to including a series of instructions in my webpack.config.

However I have no webpack.config in my main architecture, I am using babel (I'm not sure how these two facts are connected, I am not proficient in JS). So I wouldn't know where to apply this.

How to make images load properly from local? What if I don't have a webpack.config file in my project?

**Edit : It seems my lack of webpack.config comes from the fact that I'm using next. **

My current next.config.js file :

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)

Without a loader, you just have to place the image next to the scss file (same folder). Then ``background-image: url(./startransparent.gif);`` — josemartindev, Jun 12 '19 at 09:04
in `webpack.config.js` be sure to add `gif` for the formats in the module rules. Somewhere you have `test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,` add `|gif` after the `|svg` — Mihai T, Jun 12 '19 at 09:06
@josemartindev It gives me the same error when I put the file in the same folder — WNG, Jun 12 '19 at 09:30
@WNG have you tried putting quotes? ``url("./startransparent.gif");`` — josemartindev, Jun 12 '19 at 09:32
post your whole package.json dependencies, and your project folder structure please — Daniel Lizik, Jun 12 '19 at 09:32
you basically need access to your webpack config unless it is hidden in another package or you made your app with CRA. but you wouldn't be having this problem with CRA. — Daniel Lizik, Jun 12 '19 at 09:33

score 0 · Answer 1 · answered Jun 12 '19 at 09:19

0

Please add this to your webpack configuration file . It can solve gif loader problem. Please find this link for more reference

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

answered Jun 12 '19 at 09:19

Alex Varghese

2,000
16
17

As I was stating, I don't know what is my "webpack configuration file", I don't think I have one. I don't have a file name webback.config in my project except in some of my imported libraries – WNG Jun 12 '19 at 09:32
Wing, did you create your application using create-react-app? – Alex Varghese Jun 12 '19 at 09:43

score 0 · Answer 2 · answered Jun 12 '19 at 13:44

The problem originated from the fact that I was using next and not webpack, which makes it somehow easier to install the loader, but less documented on the Internet.

I installed the "next-images" library, and changed my next.config.js to the following :

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)

I was inspired by the solution appearing in this github issue

React : setting background image for a file present on the server

2 Answers2