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

Generate random entries from an object based on specific criteria and append them to a fresh object using Typescript

Troubleshooting problems with Angular 6 update through the command "ng update"

Exploring TypeScript: Implementing a runtime data mapping in place of an interface

What is the best way to retrieve the previously chosen item from an array?

Using MongoDB Stitch with Angular 7 Development

404 Error message encountered across all routes in a Node TypeScript Azure Function App - Resource not located

Steps for incorporating universal style into Angular 6/7 library

An effective way to define the type of a string property in a React component using Typescript

Propagating numerical values through iterative iterations

Unexpected behavior observed in ng-select when pasting search values

Should we implement REST API with authentication?

What steps can I take to resolve the keyboard problem with Ionic Capacitor?

The addition operator cannot be used with the Number type and the value of 1

Looking to update the URL from another component?

What is causing VSCode's TypeScript checker to overlook these specific imported types?

Is there a method to improve type inference in vscode?

tips for managing response time in firebase authentication state

Issue encountered: In Angular 8, an error is thrown stating "TypeError: Object(...) is not a function" when trying to utilize ng-idle/ng-keepalive within the eval

Resolving the non-null assertion error in TypeScript and React: A step-by-step guide

Enhance the visual appeal of your checkboxes in React Fluent UI by customizing the color of the checked mark and