Angular 2: Dealing with Missing Image Loading

Question

Angular 2: Dealing with Missing Image Loading

When viewing an HTML file containing the following code:

 <div>
      <img  src="New-Google-Logo.png"/>
    </div>

The image file New-Google-Logo.png is expected to load from the same folder as the HTML file. However, after running ng serve, the HTML page loads successfully with all other content except the image. It was attempted to directly link to an external image (e.g. www.google.com/images/x.png) and that worked, but the local file failed to load.

Folder Structure :

src
  -app
    -logincomponent
              - logincomponent.html
              - logincomponent.css
              - New-Google-Logo.png
              - logincomponent.ts
     -homecomponent
              - homecomponent.html
              - homecomponent.css
              - homecomponent.ts

The New-Google.png file is referenced within the logincomponent.html as shown above.

Another approach was tried :

src
  -app
    -logincomponent
              - logincomponent.html
              - logincomponent.css
              - Images
                - New-Google-Logo.png
              - logincomponent.ts

And referenced in the HTML like this:

<div>
      <img  src="./images/New-Google-Logo.png"/>
 </div>

Unfortunately, neither of these methods worked as expected.

html css angular

Answer 1

Answer №1

If you are using angular-cli, it is recommended to store all your static assets in the assets folder. This way, you can easily reference them in your code like this:

 <div>
      <img  src="assets/images/New-Google-Logo.png"/>
 </div>

When serving the project, all static assets must be available to the client in order to display them. Angular CLI bundles the entire project into JavaScript files. There are two ways to serve static assets:

Place all static assets in the assets folder, which angular-cli will serve by default as specified in .angular-cli.json file
Alternatively, you can add the static assets folder to the assets array in the .angular-cli.json file. For example, if your images folder is within a static folder at the same level as the assets folder, you would update the JSON like this:
```
"assets": [ "assets", "static/images" ]
```

Answer 2

If you are using angular-cli, it is recommended to store all your static assets in the assets folder. This way, you can easily reference them in your code like this:

 <div>
      <img  src="assets/images/New-Google-Logo.png"/>
 </div>

When serving the project, all static assets must be available to the client in order to display them. Angular CLI bundles the entire project into JavaScript files. There are two ways to serve static assets:

Place all static assets in the assets folder, which angular-cli will serve by default as specified in .angular-cli.json file
Alternatively, you can add the static assets folder to the assets array in the .angular-cli.json file. For example, if your images folder is within a static folder at the same level as the assets folder, you would update the JSON like this:
```
"assets": [ "assets", "static/images" ]
```

Answer 3

Answer №2

alter the route to

<img  src="assets/images/New-Google-Logo.png"/>

then include dimensions

 <img  src="assets/images/New-Google-Logo.png" width="200" height="100">

Answer 4

alter the route to

<img  src="assets/images/New-Google-Logo.png"/>

then include dimensions

 <img  src="assets/images/New-Google-Logo.png" width="200" height="100">

Answer 5

Answer №3

When you generate a project using the CLI, you will find an assets folder. Create an image folder within it and copy all your .png images into it. Then, reference the image in your HTML using src="assets/images/AnyImage.png" to display the image. In your case, make sure you have placed your images inside the loginComponent folder. Give it a try, and it should work as expected.

Answer 6

When you generate a project using the CLI, you will find an assets folder. Create an image folder within it and copy all your .png images into it. Then, reference the image in your HTML using src="assets/images/AnyImage.png" to display the image. In your case, make sure you have placed your images inside the loginComponent folder. Give it a try, and it should work as expected.

Answer 7

Answer №4

When your CSS files contain references to images like the example below:

.topmenu a:hover {
    background:url('../images/topm_bg_right.gif') right top no-repeat;
    color:#fff;
}

You might need to include image extension wildcards in the permit all list of your WebSecurityConfig class. This is especially necessary when your application is a combination of Angular and Spring Boot, built together using ng build and deployed to the static folder.

The necessary configuration in the permit all list would look like this:

.antMatchers("/", "/*.jpg", "/*.png",
                    "/home", "/assets/**",
                    "/polyfills.js",).permitAll()

Answer 8

When your CSS files contain references to images like the example below:

.topmenu a:hover {
    background:url('../images/topm_bg_right.gif') right top no-repeat;
    color:#fff;
}

You might need to include image extension wildcards in the permit all list of your WebSecurityConfig class. This is especially necessary when your application is a combination of Angular and Spring Boot, built together using ng build and deployed to the static folder.

The necessary configuration in the permit all list would look like this:

.antMatchers("/", "/*.jpg", "/*.png",
                    "/home", "/assets/**",
                    "/polyfills.js",).permitAll()

Answer 9

Answer №5

Effective Solution for Angular V18 in 2024

Make sure to update your asset configurations in the angular.json file

"assets": [
    {
        "glob": "**/*",
        "input": "src/assets/",
        "output": "/assets/"
    },
    {
        "glob": "**/*",
        "input": "public"
    }
],

For detailed information, check out the Angular Docs:

Answer 10

Effective Solution for Angular V18 in 2024

Make sure to update your asset configurations in the angular.json file

"assets": [
    {
        "glob": "**/*",
        "input": "src/assets/",
        "output": "/assets/"
    },
    {
        "glob": "**/*",
        "input": "public"
    }
],

For detailed information, check out the Angular Docs:

Angular 2: Dealing with Missing Image Loading

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Effective Solution for Angular V18 in 2024

Similar questions

Attempting to align the text perfectly while also adding a subtle drop shadow effect

Unable to eliminate blue highlighting in Chrome when an element is in focus

Using Laravel to connect custom fonts

Issues with Gulp Autoprefixer Functionality

The date format in AngularJS is not being displayed correctly according to the request

Execute consecutive Angular2 functions in a sequential manner, one following the next

Creating a visually dynamic stack of images using javascript, jquery, and HTML

Arrange DIV elements sequentially with HTML, JQuery, and CSS

Tips for including numerous hyperlinks in a single row for a website's navigation menu

Leverage the power of jQuery to manipulate video tags

How to perfectly position various height <a> elements in a WordPress mega menu

Utilizing Angular: Integrating the Http response output into a map

The React Navbar fails to appear when using React JS

When the pathway is void, it becomes impossible to redirect to the designated component

Upgrading from Angular 6 to Angular 7

Formatting PDF exports in Angular using jspdf

Using jQuery to add a class to an image element when the source attribute contains a specific

Using JQuery, identify cells located in the first column of a table excluding those in the header section

Building a user interface in Angular2 that consists of multiple components and utilizes

Incorporating AngularJS to show sections of a webpage in real-time