Problem with jHipster image display

Question

Problem with jHipster image display

I'm facing an issue while trying to load an image using Angular. The source of the image should come from an attribute of an object within an *ngFor loop, like this:

<div *ngFor="let object of objects">
   <img src="{{object.imagePath}}">
</div>

Strangely, the image is not found when loaded this way. However, if I hardcode the path directly into the img tag as shown below, it works perfectly:

<img src="../../content/images/myObjectImage.png"/>

Any thoughts on how to resolve this issue?

angular typescript jhipster

Answer 1

Answer №1

The only solution I came across to get it functioning was by creating an array and populating it like this:

for(let i = 0; i < object.length; i++)
{
    imageUrlArray[i] = require(object[i].imgUrl);
}

Then in the view section:

<img src="{{imageUrlArray[i]}}">

Answer 2

The only solution I came across to get it functioning was by creating an array and populating it like this:

for(let i = 0; i < object.length; i++)
{
    imageUrlArray[i] = require(object[i].imgUrl);
}

Then in the view section:

<img src="{{imageUrlArray[i]}}">

Answer 3

Answer №2

Utilize attribute binding with [src]="..."

 <div *ngFor="let item of items">
  <img [src]="item.imagePath">
 </div>

Take a look at this sample:

@Component({
  selector: 'my-component',
  template: `
    <div>
      <div *ngFor="let item of items">
        <img [src]="item.path" width="120px">
       </div>
    </div>
  `,
})
export class MyComponent {
  items = [
    {path: 'http://www.example.com/image1.jpg'},
     {path: 'http://www.example.com/image2.jpg'}
    ];
  constructor() {
    this.title = `Angular! v${VERSION.full}`
  }
}

Answer 4

Utilize attribute binding with [src]="..."

 <div *ngFor="let item of items">
  <img [src]="item.imagePath">
 </div>

Take a look at this sample:

@Component({
  selector: 'my-component',
  template: `
    <div>
      <div *ngFor="let item of items">
        <img [src]="item.path" width="120px">
       </div>
    </div>
  `,
})
export class MyComponent {
  items = [
    {path: 'http://www.example.com/image1.jpg'},
     {path: 'http://www.example.com/image2.jpg'}
    ];
  constructor() {
    this.title = `Angular! v${VERSION.full}`
  }
}

Problem with jHipster image display

Answer №1

Answer №2

Similar questions

Experience the mesmerizing motion of a D3.js Bar Chart as it ascends from the bottom to the top. Feel free to

Guide on deploying a web application with Angular 6 as the front end, ASP.NET Core in the backend, and SQL Server as the database on Nginx using Docker

Error encountered during Ionic building process: Module './scheduler/Action' not found

What is the correct way to set up Typescript with external packages for Internet Explorer 11 using Babel 7 and Webpack 4?

Angular: Implementing a dialog in a component with an established constructor

Guide to importing a scss file into a scss class

Ways to remove cdk-overlay-container

Anguar 9 is experiencing issues with loading datatable pagination, search, and sorting functionalities

The subdirectory './src/ngtsc/reflection' is not included in the "exports" section of the '/node_modules/@angular/compiler-cli/package.json' file

"Proper Installation of Angular Project Dependencies: A Step-by-Step

The functionality of the Array.sort method is known to cease functioning when the length of the Array exceeds

Error Encountered: Kendo Angular 4 Peer Dependency Issue and Module "rxjs/operators/combineLatest" Not Found

Closing a modal using the Enter key in Angular 6

Streamline imports with Typescript

Implementing a more efficient method for incorporating UUIDs into loggers

Is there a way to create a typesafe Map in TypeScript with a key and value both being of the same generic type X?

Arranging an array of objects based on a specific keyword and its corresponding value

Saving HTML code entered in a textarea field does not work with the database

Using TypeScript and NestJs: Spread types can only be generated from object types

Preventing me from instantiating objects