The origin of the Angular img src becomes blurred when invoking a function

Question

The origin of the Angular img src becomes blurred when invoking a function

I want to dynamically change the image src by calling a function that returns the image path. However, when I attempt to do so using the code below, the image element displays as <img src(unknown)/>

component.ts:

getMedia(row) {
    this.sharedDataService.inventoryRows.forEach(function(elem){
      if(row.vin === elem.vin){
        console.log(elem.media[0].href);    // correct string gets logged
        return elem.media[0].href;
      }
    });
  }

This piece of code successfully logs the string stored in elem.media[0].href to the console, indicating that it is returning the correct path as a string.

HTML:

<img src="{{getMedia(row)}}" />
//The resulting DOM element shows up as <img src(unknown)/>

I have also tried the following suggested solutions from Stack Overflow, but unfortunately, they do not give me the desired DOM element either

<img [src]="getMedia(row)" />
//The resulting DOM element is displayed as <img src="null"/>

I am confident that this should work, but it seems like there is some underlying technical knowledge that I am missing about how it actually works

angular typescript

Answer 1

Answer №1

The function does not actually return any data, because the return statement in the .forEach loop only exits the loop and .forEach always returns undefined. To fix this issue, you can replace .forEach with something like .find, as demonstrated below:

function notWorking(){
  var items = [1,2,3,4,5];
  var value = items.forEach(function(num){
    if(num == 2)
       return num;
  });
  return value;
}

function working(){
  var items = [1,2,3,4,5];
  var value = items.find(function(num){
    if(num == 2)
       return num;
  });
  return value;
}


console.log("notWorking", notWorking());
console.log("working", working());

Answer 2

The function does not actually return any data, because the return statement in the .forEach loop only exits the loop and .forEach always returns undefined. To fix this issue, you can replace .forEach with something like .find, as demonstrated below:

function notWorking(){
  var items = [1,2,3,4,5];
  var value = items.forEach(function(num){
    if(num == 2)
       return num;
  });
  return value;
}

function working(){
  var items = [1,2,3,4,5];
  var value = items.find(function(num){
    if(num == 2)
       return num;
  });
  return value;
}


console.log("notWorking", notWorking());
console.log("working", working());

Answer 3

Answer №2

Try implementing a for loop instead of a foreach loop to improve efficiency and clarity in the getMedia function. Make sure you are returning a value from this function when exiting the loop.

getMedia(row) {
       const data = this.sharedDataService.inventoryRows;
       for(let i = 0; i < data.length; i++) {
         if(row.vin === data[i].vin){
            return data[i].media[0].href;
         }
       }
       return '';
 }

Answer 4

Try implementing a for loop instead of a foreach loop to improve efficiency and clarity in the getMedia function. Make sure you are returning a value from this function when exiting the loop.

getMedia(row) {
       const data = this.sharedDataService.inventoryRows;
       for(let i = 0; i < data.length; i++) {
         if(row.vin === data[i].vin){
            return data[i].media[0].href;
         }
       }
       return '';
 }

The origin of the Angular img src becomes blurred when invoking a function

Answer №1

Answer №2

Similar questions

Obtain a tuple of identical length from a function

An issue was encountered when attempting to log out the user from Firebase

Error: Type '() => () => Promise<void>' is not compatible with type 'EffectCallback'

Broadening Cypress.config by incorporating custom attributes using Typescript

In the Chrome task manager, an Angular 6 website is initially seen with a memory footprint of 1.3 GB, which then decreases to just 160 MB after a

Tips for effectively overriding a method in typescript

Knexfile Doesn't Utilize TypeScript Paths

Notify the user with a message that our support is limited to Chrome, Firefox, and Edge browsers when utilizing Angular

Why is it that my side effect action is unable to identify the return action type property?

Fetching data from MongoDB, loading over 3000 entries and implementing pagination

Harnessing the power of external Javascript functions within an Angular 2 template

Customize the text for the material icon

Issue with excluding certain events from being identified in the polyfills.ts file in Angular 8

Angular4 does not recognize this.form.get as a valid function

Angular service designed for distributing a collection of data across nested levels

Can you help me identify any issues with this code for uploading an image and quickly displaying it in Angular?

What are the recommended TypeScript tsconfig configurations for running Node.js 10?

The specified path "/src/app/app.module.ts" was not found while attempting to add ng in an Angular project that is using a custom path

Unable to display complete content of Ionic 3 webpage

Is it possible to utilize an Angular2 service with the DOM addEventListener?