What is the best way to display a collection of images in an HTML page?

I have a list of strings containing images. How can I display these images on a webpage using Angular?

images: [
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/340ea5ee01acc37f.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/9b75ea873012234c.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/d12b3a343f16cb28.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/ff80cdc13a9832df.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/c11025d7f461121b.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/bb783cf9a2b1f35b.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/3d68e6affdf43c18.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/0fbd36321cf49f40.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/63ef79df1ffcfef5.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/acc162dea7861b9b.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/e7717c4955e5a81c.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/09938b4f62ca370e.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/697ac4b4514d9d5c.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/e0306175706fe9ce.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/6d09a807ebb7860b.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/10bd1eba8dfe318b.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/cff9e8bd0c7e5ec7.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/722e852d720c3d25.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/dc3e2c5631c8ab48.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/9c0ac971e3a244e0.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/616b292e99049410.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/ae03a8b55273958a.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/748114df7b1ecb21.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/021358e328ecc9dd.jpg",
  "https://images.oyoroomscdn.com/uploads/hotel_image/1097/13174c9f54ada03f.jpg"
]
javascriptarraysangulartypescript

Answer №1

utilize the combination of *ngFor and [src] to display images in an HTML view

Check out the code on Stackblitz 

<div  *ngFor="let image of images" >
  <img [src]='image'/>
</div>

Answer №2

Here is an example to follow:

.ts

images:[
"https://images.oyoroomscdn.com/uploads/hotel_image/1097/340ea5ee01acc37f.jpg",
"https://images.oyoroomscdn.com/uploads/hotel_image/1097/9b75ea873012234c.jpg"
]

.html

<div *ngFor="let img of images">
    <img [src]="img" />
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Do you know the proper method to refresh data on a UITableView?

Is this the correct approach to appending objects to my data source and then reloading the table? The datasource I am using is self.items //Creating a copy of current items self.itemsCopy = [self.items mutableCopy];//[[NSMutableArray alloc] initW ...

iphoneobjective-ccocoa-toucharraysuitableview

Tips on saving stimulsoft report js onto a server using Angular

I am working on a report designer component and have assigned a method to the onSaveReport event. However, I am encountering an issue where the member of my component is showing as undefined. options: any; designer: any; public document: Report ...

javascriptangulartypescriptstimulsoft

The form is not valid because the CustomValidator was triggered on a field that was not required

Here is the form setup: this.form = new FormGroup({ someField: new FormControl(''), someOtherField: new FormControl(''), cpf: new FormControl('', [ CustomFormValidators.isValidCPF ]), }); And t ...

angularangular-reactive-forms

An AJAX function nested within another AJAX function

Is there a way for me to return the second ajax call as the result of the ajax function? I could use some assistance with this. function ajax(url: string, method:string, data:any = null) { var _this = this; return this.csrfWithoutDone().done(funct ...

javascriptjqueryajax

Creating a tooltip for new list items: A step-by-step guide

I'm currently working on creating a tooltip using JQuery for incoming list items. Users will input text in a textfield, press enter, and those values will be displayed in a visible list on the website. I intend to have a tooltip associated with each i ...

javascriptjqueryhtmlcss

Effect of Active or Focus on the HTML <ul> element

Check out this example of a UL tag: <ul style="list-style-type:none; padding:5px ; border:solid 1px #666666;"> <li>I am waiting </li> <li>I am waiting </li> <li>I am waiting </li> <li>I am wa ...

javascripthtmlcss

The error is popping up as I try to deploy my Next.js application on Vercel

warning " > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d0f181c1e095009120d5011121c1914131a501f1c0f3d4f534c534d">[email protected]</a>" has an incorrect peer dependency "react@^16 || ^17" ...

javascriptreactjsnext.js

The async function can successfully return results, but unfortunately the array ends up being empty

Recently, I came across Async functions while exploring a question I had previously posted. I needed to incorporate another one for my current project. I am fetching a list of entries from Firebase, storing them in an array, and then returning the list. H ...

iosarraysswiftasynchronous

Set up AngularJS routing for accessing the Web API endpoint

I have encountered an issue with my AngularJS application and Asp.net Web Api. Both applications are hosted on port 80 of the IIS server. The problem arises when the web api URL cannot be accessed due to angularjs routing redirecting API calls to the root ...

javascriptangularjsiisasp.net-web-apiiis-7

Guide to making a lively table in angular2

Aravind Information Selection Submit Reset ...

angular

The pipe property cannot be accessed for the specified type "OperatorFunction<unknown, [unknown, boolean, any]>"

I have set up a data subscription that I want to utilize through piping, but for some reason it's not working as expected. The error message I'm receiving is: The property pipe is not available for type "OperatorFunction<unknown, [unknown, b ...

javascriptangulartypescriptionic-framework

The jQuery UI Dialog is experiencing an issue with a button that is triggering a HierarchyRequest

I am facing an issue with a piece of javascript that works perfectly on other pages but is now throwing a HierarchyRequestError on a new page. This leads me to believe that there may be an HTML problem on this particular page. Here is a simplified version ...

javascriptjqueryjquery-uijquery-templates

Troubleshooting issues with jQuery `.live()` event not triggering as expected

In a project I am working on, I have implemented complex AJAX functionality to fetch inner page content from a WordPress blog. Due to the dynamic nature of the site, where the DOM is replaced after page load via AJAX, I have opted to use jQuery's .liv ...

javascriptjquerydebugging

Top method for handling multiple conditions - JavaScript

I created a customized function to create a responsive carousel with multiple images per slide. (Unfortunately, I couldn't get Owl Carousel to work on my Angular project, but that's not the focus here). The number of images displayed per slide i ...

javascriptfunctionif-statementcomplexity-theory

Is it possible to apply the DRY Concept to this React JS code?

https://i.stack.imgur.com/jcEoA.png import React from "react"; import { Chip, Box } from '@mui/material'; const Browse = () => { const [chip, setChip] = React.useState("all" ...

javascriptreactjsmaterial-uiweb-deploymentdry

Updating an HTML element by using the input value in a text field with JavaScript/jQuery

Although it may seem straightforward, I am new to Javascript and struggling to find or create the script I need. I have a list of BIN numbers for credit cards and want to extract the first 6 digits of the card number field to determine the type of card, an ...

javascriptjqueryhtml

Tips for addressing the issue of mat-list-item not occupying the entire row's space

Hello everyone, I am currently trying to render an article.component.html within my article-list-component.html in a list format. When I use plain HTML, it renders correctly as shown in picture 1: Title - author - Date Here is the code for my article-list. ...

htmlcssangularangular-material

Is there something I'm overlooking, or is this behavior unusual for an "if statement"?

I am facing an issue with returning a value from a function. It seems like a simple task - just looping through my HTMLElements and returning the one I need. This problem is new to me, and I have spent a considerable amount of time debugging the code and ...

javascripttypescript

"Why does the function not work inside the template, but works when the logic is set inside the template

My logic was working perfectly -> for example: Everything was working fine until I tried to set my values inside ts and switch logic in ts.file component. But when I did it inside the ts file, it stopped working: It's not working anymore. Why i ...

angular

JQuery functions are functioning properly in Internet Explorer 10, but are encountering issues in Internet Explorer

My JavaScript function calls a jQuery function that works in IE10 but not in IE7. function test() { // Display message before calling jQuery function... alert("Before"); // Call the jQuery function... $("#boxscroll").getNiceScroll().resize(); // Display m ...

javascriptjqueryhtmlinternet-explorer