search

img-mapper / react-img-mapper

React Component to highlight interactive zones in images
https://img-mapper.github.io/react-docs
MIT License
122 stars 39 forks source link

NextJS with Tailwind CSS not showing the photo #47

Closed ventsislavnikolov closed 1 year ago

ventsislavnikolov commented 2 years ago

Describe the bug When using Tailwind CSS on NextJS project the React Image Mapper not working. The image is in the source of the code, but not showing.

To Reproduce Steps to reproduce the behavior:

  1. npx create-next-app -e with-tailwindcss my-project (or create nextjs project and then add the tailwindcss, its the same)
  2. npm install react-img-mapper --force (cause its not working without force, cause react versions)
  3. add the code from Usage section on this repo
  4. See there is no image show in the project (but when inspect you can see the code is there and in network the image is downloading)
  5. go to styles/global.css and remove first line - @tailwind base;
  6. observe everything (except tailwind stuff) is working

Error Stack No error shown in console.

Expected behavior The image and mappers should work with tailwindcss.

Screenshots https://prnt.sc/Vg-DRyCv4qrY

Desktop (please complete the following information):

NishargShah commented 2 years ago

Hello @ventsislavnikolov, for now, Next.js is not fully supported due to some issues.

flosrn commented 2 years ago

Hello @ventsislavnikolov, for now, Next.js is not fully supported due to some issues.

There are any workaround?

jhowards commented 2 years ago

Hello @ventsislavnikolov, for now, Next.js is not fully supported due to some issues.

There are any workaround?

Adding :

img-mapper {

height: 100% !important; width: 100% !important; }

to the CSS works for now.

NishargShah commented 1 year ago

Hello @ventsislavnikolov @flosrn @jhowards Resolved in V1.5.0

Please check and free feel to reopen if you found any bugs related to this issue.