CODEWITHSUNDEEP
angularwebpackimage-loading
joelondesign
joelondesign

Reputation: 39

Can't load background image ERROR Unexpected character '�' (1:0)

I am simply trying to load a background image into my Angular 4 project. The path I created for the image is 'src/assets/images/background.jpeg' I used the angular cli to generate my project so far but created the images directory simply by making a directory in atom.

This is the full error

ERROR in ./src/assets/images/background.jpeg Module parse failed: /Users/Joel/web_dev/projects/travel-journal/src/assets/images/background.jpeg Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)

@ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./src/styles.css 6:179-221 @ ./src/styles.css @ multi ./node_modules/leaflet/dist/leaflet.css ./node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css

webpack: Failed to compile.

I am thinking that I need to say somewhere in a file that .jpeg is an appropriate file type, or need to install an image loader as suggested in the error.

I am still relatively new to Angular so was surprised not to find anyone with a similar issue that worked for me. I saw one that said make sure that your html comments are formatted correctly, which they are.

src/styles.css

body{
  font-family: 'Jaldi', sans-serif;
  background-image: url('assets/images/background.jpeg');
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

I haven't been able to find the webpack file or else I would post it. I researched that here. If there are any other files that would be helpful for this issue in this Angular project let me know.

Upvotes: 1

Views: 3607

Answers (4)

Nawin
Nawin

Reputation: 636

If you don't have any problem load it from server instead of url('/assets/images/background.jpeg');

like url('https://www.example.com/assets/images/background.jpeg');

It was working for me try once.

Upvotes: 0

Donal
Donal

Reputation: 31

I had the same issue while using the VS 2017 Angular and .NET Core template: nearly drove me nuts until I came across this post from Steven Sanderson (Set Image path on ASP.NET Core + Angular 2 template for Visual Studio) that recommended using require('../assets/images/yourimage.jpg'), for example:

constructor() {
        this.images = [
            { "url": require("../../assets/images/image003.jpg"), "title": "Workin on water", "caption": "Sometimes it all just gets wet" },
            { "url": require("../../assets/images/image005.JPG"), "title": "Bus trip", "caption": "people havin fun on a dodgy bus " },

I tried this and as I was passing an image array, some of my test images had file extensions in caps (i.e. '/yourimage.JPG'), and I noticed these ones were the only ones throwing the error. To get around this I tried adding the 'JPG' entry to my webpack.server.js in the modules > rules section thus: 

{ test: /\.(png|jpg|JPG|jpeg|gif|svg)$/, use: ['url-loader?limit=25000'] }

and found that this worked. As a solution this is preferable for my purposes as my intention is to iterate through a range of images loaded from a data source, but I found another way which also worked was to simply specify the image path in lowercase.

Upvotes: 2

joelondesign
joelondesign

Reputation: 39

The server error for the image load is gone when I renamed the file and filepath url in the styles.css to assets/images/background.jpg from .jpeg.

I am not sure why .jpeg would not as image originally was of that extension; however .jpg does not give an error.

Upvotes: 1

Kutlu Ozel
Kutlu Ozel

Reputation: 182

try url('/assets/images/background.jpeg');

or url('../images/background.jpeg')

Upvotes: 3

Related Questions