Not working when i using next.js

[ivanjuliant]

i try to using this plugins , but not working when i'm using nextjs, if i try without nextjs its working, but when i using nextjs only show teh image, but image can't zoom when mouse hover the image, maybe there is a solution for this.

[Eriickson]

@ivanjuliant Indeed my friend, I am creating an app and I want to implement that component, because it is wonderful, just today I was testing it, but in an application created with create-react-app, after I went to my application in development that is created with nextjs , I notice that the image is simply displayed, but it does not do the desired effects, if the developer were kind enough to give a quick answer and explain why this, I would appreciate it a lot, since I am in a hurry to finish my app and I do not want to leave this plugin out

[ivanjuliant]

@Eriickson same like me, i dont want to leave this plugin out , i still trying to find the solution , by edit next.js config and ask to stackoverflow , i hope i got the answer.

[AdamRisberg]

I tried using the Magnifier and SideBySideMagnifier components in a nextjs project (using create-next-app), and they worked fine for me. I tried in dev mode and then tried building and running, both worked. So, I'm not sure what's happening. Can you provide some more info? Maybe a code snippet of how it's being used, so I can match it in my test.

Below is the full code is used in index.js for the test:

import { SideBySideMagnifier } from "react-image-magnifiers";

export default function Home() {
  return (
    <div>
      <div style={{ width: "50%" }}>
        <SideBySideMagnifier
          imageSrc={
            "https://images.unsplash.com/photo-1600455076912-ca2af5999539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"
          }
        />
      </div>
    </div>
  );
}

[AdamRisberg]

You both probably already accounted for this, but If the image is rendered but not interactive, it usually means that the image being used is too small (needs to be larger than the size of the container it's being rendered in).

Are there any errors in the console?

[ivanjuliant]

i solved the problem, it because i have scss call "typhography.scss" and make tag "img" max-width: 100%, because of that my image always set 100% of width, by disable or remove this line

img {
     max-width: 100%;
}

it's work perfectly, thanks for making awesome plugin.

[Eriickson]

wonderful, friend lol, I had the same error, as @ivanjuliant, I thought it was because of the SSR, but unlike he, I am using tailwindcss and this framework adds those rules by default, I just had to overwrite them and voila, thank you very much