Issue encountered when trying to view images stored locally

As a beginner in the world of Angular framework and web development, I am struggling to display images stored in local storage.

<tr *ngFor = "let item of unused; let i = index ; ">
     <div   style="padding-left:25%;padding-top:0%;"  class="row">
          <img  src="" id="imageID{{i}}" style ="width: 100%;height: 100%;padding-right: 50px;padding-bottom: 15px;" >
     </div>
</tr>

I have declared the array variable globally and used it in ngOnit like this 

unused=[1,2,3,4,5]


for (let i=0; i<5;i++)
    { 
      var n = i.toString();

      var dataImage = localStorage.getItem(("image"+ n));
      var bannerImg = document.getElementById(("imageID"+n)) as HTMLImageElement;
      bannerImg.src = dataImage;
    }
javascriptangulartypescriptwebangular6

Answer №1

imageData: any[]= [];

ngOnInit(){
for (let j=0; j<5;j++)
    { 
      var image = localStorage.getItem(("image"+ j));
      imageData.push(image);
    }
}

<tr *ngFor = "let picture of imageData">
     <div   style="padding-left:25%;padding-top:0%;"  class="row">
          <img  [src]="picture"  style ="width: 100%;height: 100%;padding-right: 50px;padding-bottom: 15px;" >
     </div>
</tr>

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

The module "@clerk/nextjs/server" does not contain a member with the name "clerkMiddleware" available for export

Currently, I am working on Nextjs 14 with typescript and implementing authentication and authorization using Clerk. Following the instructions in the Clerk documentation, I included the code snippet below in my middleware.ts file: import { authMiddleware } ...

typescriptnext.jsclerk

Issues with Angular preventing app from launching successfully

So I've been working on a Cordova app with AngularJS and everything seems to be running smoothly in Chrome and other browsers. However, when I try to install the apk on Android, AngularJS doesn't seem to execute the index.html upon launch. What& ...

javascriptandroidangularjscordovaphonegap

Is it possible to enable unknown keys for multiple schema objects simultaneously using Joi Validation?

I have a multitude of validator files each containing nearly a hundred schema objects. My goal is to validate unknown keys for all of them simultaneously. I've managed to figure out how to do it for a single object, as shown below. Is there a way to a ...

javascriptnode.jsexpressjoi

Developing interactive checkboxes for individual rows through React.js

Within a form, I have rows containing two inputs each. Upon clicking "add", a new row is created. For the second row onwards, by clicking "add" a checkbox labeled 1 should be added to indicate dependency on the previous row. In addition, for the third row, ...

javascripthtmlarraysreactjsdictionary

Leveraging jQuery's `.eq()` method on multiple class selectors

Is there a way to effectively utilize the 'eq' function on multiple classes? Due to the non-sequential nature of the divs with class 'a', I am encountering difficulties with using the 'eq' function to update their class. Inter ...

javascriptjqueryhtmlcss

Is there a way to eliminate the number spinner in Angular specifically for certain input fields?

I am facing an issue where I need to remove the numeric spinner from only a few selected inputs. By adding the following code snippet to my styles.scss file, I was able to successfully remove the spinner: /* Chrome, Safari, Edge, Opera */ input[matinput]: ...

cssangularangular-material

Keep a record of the Observable for future subscription in Angular 7

In my scenario, I anticipate that an Angular 7 client may frequently go offline for extended periods of time. When the client is connected, I intend to process HTTP requests as usual using observables. However, in the event of a network disconnection, I p ...

angularrxjslocal-storageobservablesubscribe

Updating a hyperlink with data dynamically upon clicking a different button using jQuery

I need to create a script that will add the id of 'peter' to the hyperlink of anchor 'jack' when 'peter' is clicked. <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery. ...

javascriptjquery

Could a javascript loop be created to continuously activate a button with each iteration?

I have just started learning javascript and I am in the process of creating a website where users can change the background by simply clicking on a button. It's working perfectly fine so far, but I want to add another feature where the background imag ...

javascripthtmlcssloops

Set the title attribute according to the content of the <p> tag

Recently, I encountered a situation where I had numerous p tags with a specific class (let's call it .text). My task was to include the title attribute containing the text of each tag. For example: <p> Hello, world </p> This would resul ...

javascriptjqueryhtml

What is the comparison between actual pixels and text size in Internet Explorer?

Can you determine the actual font size in pixels corresponding to the following text size options in Internet Explorer? Largest Larger Medium Smaller Smallest In a web development project, I am looking to achieve a similar functionality to adjust the te ...

javascripthtmlcssinternet-explorerweb

Simultaneously extracting information from 2 APIs with ForkJoin: Undefined Exception encountered

Seeking to retrieve data from 2 APIs using ForkJoin. Utilizing forkjoin for asynchronous data access. Successfully retrieved homeTeamName and awayTeamName, encountering error while accessing lines: core.js:1521 ERROR ReferenceError: allline is not define ...

jsonangularapifork-join

Having difficulty in successfully transmitting a dictionary via AJAX (POST) to Python (Django views) resulting in an empty dictionary every time

When I include this script in the head of the HTML : <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> and then use a button to call a function: <div> ...

javascriptpythonhtmldjangoajax

What is the significance of $() in jQuery?

I understand that $() is a selector, but I find it puzzling as to what it actually selects since there is nothing inside the parentheses. Is this a common practice or frowned upon in coding conventions? An example of where I have seen it used is when maki ...

javascriptjqueryhtmljquery-uidom

Utilizing the .fadeToggle() function to create a fading effect for text, which fades in and out

I am on the verge of achieving my goal, but I could use a little more assistance with this. $('.change').hover(function() { $(this).fadeToggle('slow', 'linear', function() { $(this).text('wanna be CodeNinja' ...

javascriptjqueryhtml

Are there alternative methods for utilizing ionicons without needing the <script> tag?

In our workplace, the designer opted to incorporate ionicons but the documentation only provides instructions on how to use them without Ionic: Insert the following <script> at the end of your page, right before the closing </body> tag, to ac ...

javascriptionic-frameworksveltesveltekit

Issue in TypeScript: "Unable to locate identifier 'T', how can the generic be passed?"

I am currently implementing https://www.npmjs.com/package/recompose in my project To make Table accept a generic "T", how can I modify the type signature so that compose<Props<T>, CompProps<T>> will be properly satisfied? I have made se ...

typescriptrecompose

Utilizing a JSON object passed from one JavaScript function to another: A comprehensive guide

After creating a function that returns JSON format through an ajax call, I received the following JSON data: { "communication": [{ "communication_name": "None", "communication_id": "1" }], "hardware": [{ "hardware_name ...

javascriptajaxjson

Retrieve dashboard configurations in AngularJS by making an $http request prior to initiating the dashboard controller

I am currently immersing myself in Angular and tackling a complex dashboard framework all built with Angular. Prior to loading the controllers, I need to fetch various dashboard settings from the server using $HTTP. These settings play a crucial role in de ...

javascriptangularjs

Switching image when hovering with mouse using javascript

I am working on an HTML webpage and trying to make an image change when hovering over a div, but it doesn't seem to be working. Any suggestions? <!doctype html> <html> <head> <meta charset ="UTF-8"/> &l ...

javascripthtmlonmouseover