When I add background-image: url(../images/my-image.png) to phoenix.css, the image displays correctly but the console shows an error Uncaught Error: Module build failed: ModuleParseError: Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type…

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.

[image] grainne6: Uncaught Error: Module build failed: ModuleParseError: Module parse failed: Unexpected character ‘�’ (1:0) ParseError (c:\projects\Phoenix\filmhub\assets\node_modules\webpack\lib\NormalModule.js:364:19) sorry, you clearly reported it. Hmm, a strange character somewhere in …

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.

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-cs…

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/load…

Elixir Programming Language Forum

Adding background image throws a module load error

Questions & Help Questions

adrianrl May 26, 2019, 1:04pm 8

Can you share your configuration for Webpack?