wittlock/ngx-image-zoom

demo project

Closed this issue · 3 comments

kernelport commented

I did a short test in a minimal angular cli project.

https://github.com/kernelport/ngx-image-zoom-test/blob/master/src/app/app.component.html#L7

It works when the options are provided witout [].
It is a typo in the Readme or an API change in angular?

This is working:

<ngx-image-zoom
    thumbImage="https://wittlock.github.io/ngx-image-zoom/assets/thumb.jpg"
    fullImage="https://wittlock.github.io/ngx-image-zoom/assets/fullres.jpg"
></ngx-image-zoom>

This not:

<ngx-image-zoom
    [thumbImage]="https://wittlock.github.io/ngx-image-zoom/assets/thumb.jpg"
    [fullImage]="https://wittlock.github.io/ngx-image-zoom/assets/fullres.jpg"
></ngx-image-zoom>
wittlock commented

I believe if you want to use the brackets but not a variable then you need to quote the URL. Like so:

<ngx-image-zoom
    [thumbImage]="'https://wittlock.github.io/ngx-image-zoom/assets/thumb.jpg'"
    [fullImage]="'https://wittlock.github.io/ngx-image-zoom/assets/fullres.jpg'"
></ngx-image-zoom>

With the double brackets there's an expectation of typescript code on the right hand side of the equals sign. Maybe that's not strictly the correct reason, but adding the single quotes should make it work. But if you have a hardcoded value in your template you could just go without the brackets.

  • 👍1
kernelport commented

Thank you for explanation. It works

chetan-happyness commented

I m trying to use it but having trouble as i don't have thumbnails saved during the time of uploads so i m trying to create a preview on the fly when the file gets loaded by not able to achieve as the file is retrieve from s3 and then it is converted to a smaller size, here i m not able to getting going. I have tried sending base64 image from the backend but still it is not working file as i m not able to convert the base64to image correctly and not sure what would be the right approach to resize and pass it to
[thumbImage] = ?