1

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.

skink
  • 5,133
  • 6
  • 37
  • 58
joelxbuzzanco
  • 39
  • 1
  • 3
  • 1
    Just for argument sake, try a random image with `.jpg` as the file extension and see if it works – Huangism Oct 23 '17 at 19:08
  • Change to .jpg. Not long time ago, there were an other post with the same issue. I wrote a comment so not easy to find it back, but it solved – Vega Oct 23 '17 at 19:53

4 Answers4

3

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

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

Kutlu Ozel
  • 182
  • 1
  • 7
  • Your first solution is the only one that I've found on the internet that actually makes my project stop throwing errors or warnings about the paths. I really thank you! – Cristian Feb 24 '18 at 12:06
2

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.

Donal
  • 31
  • 4
1

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.

joelxbuzzanco
  • 39
  • 1
  • 3
0

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.

Nawin
  • 485
  • 8
  • 14