search

laurenashpole / react-inner-image-zoom

A React component for zooming images.
https://laurenashpole.github.io/react-inner-image-zoom
MIT License
325 stars 36 forks source link

Image render problem in nextjs project, what is reason for that? #148

Closed VeNOM4171 closed 2 months ago

VeNOM4171 commented 5 months ago

Discussed in https://github.com/laurenashpole/react-inner-image-zoom/discussions/147

Originally posted by **VeNOM4171** May 15, 2024 It is next js project. Version that i have installed is: "react-inner-image-zoom": "^3.0.2", I have imported package like below: import InnerImageZoom from 'react-inner-image-zoom'; import 'react-inner-image-zoom/lib/InnerImageZoom/styles.css'; Following is my line of code I got following error on my browser console: Image with src "https://drive.google.com/uc?id=1S0b6atesVcBJXgpgYz2X8wX3D4Amj3aX&export=view" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio. I tried to add imgAttributes as below, but didn't worked. Following is what is rendered on screen: ![image](https://github.com/laurenashpole/react-inner-image-zoom/assets/49753535/c3f7d552-ffd0-4ecd-b1ac-df8e09e76d8c)
VeNOM4171 commented 2 months ago

I'm not sure why, but it appears that "react-inner-image-zoom": "^3.0.2" does not handle picture files from Google Drive, even if they are public. Tell me if you have any knowledge of it.

I moved to the react-zoom-pan-pinch library for the time being, and it helped me achieve my goals.

Thankyou.