Adding background image throws a module load error

Hi,

body {
  background-image: url('/images/my-image.png');
}

<%= %> tags only works inside eex templates.

Hello and welcome!

In the thread how-to-put-background-picture-to-phoenix-html-page you should find the answer to your question.

Yes, I have tried this. Like I said the images shows up when I put background-image: url(‘../images/my-picture.png’) but there is an error in the developer tools console.
Is there any way to get rid of this error

I have looked at this, the problem isn’t displaying the image, the problem is that while the image displays there is an error in the console.

sorry, you clearly reported it.

Hmm, a strange character somewhere in the background-image in the css ? maybe from a cut&paste ?

No, I have tried several images, it doesn’t make any difference. I have tried creating a new mix project and the error appears as soon as I add a background image.

Can you share your configuration for Webpack?

It’s just the default config file - I haven’t changed anything

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: {
      './js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js'))
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
  ]
});

This may be because you need url-loader to process the image. In your assets folder run:

npm i -D url-loader

Then add this line to the rules array inside your Webpack configuration:

//...
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }

I tried this but there is a different error now

Uncaught Error: Module build failed: ModuleBuildError: Module build failed: Error: Cannot find module 'file-loader'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
    at Function.Module._load (internal/modules/cjs/loader.js:508:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (c:\projects\Phoenix\filmhub\assets\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)