Using Typescript to set the image source from a pipe

Question

Using Typescript to set the image source from a pipe

I've been working on creating a custom pipe similar to the code below:

@Pipe({
   name: 'imagePipe'
})

@Injectable()
export class ImagePipe {
  constructor(public someService: SomeService, public storage: Storage) {
} 

  transform(value: any, arg: any) {
     if ((value != null) && (value!=arg)){
            return this.storage.get(value).then((val) => {
                            console.log('Your source is', val);

                })
    }
  }
}

The main purpose of this pipe is to look for a specific value in storage and then set the URL for an image. I'm using it like this:

<img src="{{info.title | imagePipe : otherTitle | async}}" width="45" height="120"/>

Although the console displays the correct value, unfortunately, the image URL remains null.

angular typescript ionic2

Answer 1

Answer №1

My assessment indicates two errors in this code snippet:

 if ((value != null) && (value != arg)){
    return this.storage.get(value).then((val) => {
        console.log('Your source is', val);
    });
}

Firstly, if the condition inside the if statement evaluates to false, nothing is returned. Secondly, I recommend loading storage.get into a "class var" and calling it from there for better organization.

Answer 2

My assessment indicates two errors in this code snippet:

 if ((value != null) && (value != arg)){
    return this.storage.get(value).then((val) => {
        console.log('Your source is', val);
    });
}

Firstly, if the condition inside the if statement evaluates to false, nothing is returned. Secondly, I recommend loading storage.get into a "class var" and calling it from there for better organization.

Answer 3

Answer №2

The answer lies within

@Pipe({
    name: 'imageConverter'
})

@Injectable()
export class ImageConverter {
    constructor(public service: SomeService, public database: Storage) {}

    transformation(value: any, argument: any) {
        if ((value != null) && (value != argument)){
            return this.database.retrieve(value).then((result) => {
                console.log('The source you seek is', result);
                return result;
            })
        }
    }
}

Certain elements of the response were inaccurate

Answer 4

The answer lies within

@Pipe({
    name: 'imageConverter'
})

@Injectable()
export class ImageConverter {
    constructor(public service: SomeService, public database: Storage) {}

    transformation(value: any, argument: any) {
        if ((value != null) && (value != argument)){
            return this.database.retrieve(value).then((result) => {
                console.log('The source you seek is', result);
                return result;
            })
        }
    }
}

Certain elements of the response were inaccurate

Using Typescript to set the image source from a pipe

Answer №1

Answer №2

Similar questions

Having trouble integrating a Bootstrap-based ecommerce theme into an Angular8 project?

The CORS policy has restricted access to the XMLHttpRequest from the specified origin at "http://...." to 'http://localhost:4200'

It can be time-consuming to render a large quantity of dynamic markers on Leaflet after receiving a response

Discover the Hassle-Free Approach to Triggering Angular Material Menu with ViewChild and MatMenuTrigger

how can I update a class of an element when the input box is disabled in angular?

Angular 2 encountered a fatal error: Issues with parsing the template:

What is the process for extracting the background color from a typescript file in Angular and connecting it to my HTML document?

There will be no further upgrades available for Angular CLI after version 1.6.0

Error: The identifier HTMLVideoElement has not been declared

The call to the hooks is not valid. Hooks must be called within the body of a functional component

The missing binding.node file is causing an issue with Node-sass

Having Trouble with Typescript Modules? Module Not Found Error Arising Due to Source Location Mismatch?

Error: Unable to access the 'nativeElement' property because it is undefined - occurring during the ngAfterViewChecked lifecycle hook

Establish the default landing page as the home screen when launching the application

Ways to automatically close the external window upon logging out in Angular 12

Issue encountered while setting up controls and AbstractControls in form development

I am attempting to store the primary array in local storage, but unfortunately, the value is not being saved within the React context API

Converting an array of objects into a dictionary using TypeScript

Using *ngIf directive in Angular to define and initialize variables

Evolving fashion trends