img-mapper/react-img-mapper

NextJS with Tailwind CSS not showing the photo

Closed this issue · 4 comments

ventsislavnikolov commented

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):

  • OS: Windows 11
  • Browser: Chrome
  • Version: 103
NishargShah commented

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

flosrn commented

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

There are any workaround?

jhowards commented

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

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.