search

Jeavon / Slimsy

Effortless Responsive & Lazy Images with LazySizes and Umbraco
MIT License
72 stars 23 forks source link

trouble getting it to work on linux #61

Closed seanhakbb closed 1 year ago

seanhakbb commented 1 year ago

Hello, thanks for great plugin! We have an issue, where its working in our local enviorment, but not working in our production env.

<picture class="block mb-6">
<source data-srcset="/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=180&amp;height=121&amp;format=webp&amp;quality=70&amp;v=1d9d1ca510fcfd0 180w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=360&amp;height=243&amp;format=webp&amp;quality=70&amp;v=1d9d1ca510fcfd0 360w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=540&amp;height=364&amp;format=webp&amp;quality=70&amp;v=1d9d1ca510fcfd0 540w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=720&amp;height=485&amp;format=webp&amp;quality=70&amp;v=1d9d1ca510fcfd0 720w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=900&amp;height=606&amp;format=webp&amp;quality=70&amp;v=1d9d1ca510fcfd0 900w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=1080&amp;height=728&amp;format=webp&amp;quality=70&amp;v=1d9d1ca510fcfd0 1080w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=1260&amp;height=849&amp;format=webp&amp;quality=70&amp;v=1d9d1ca510fcfd0 1260w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=1440&amp;height=970&amp;format=webp&amp;quality=70&amp;v=1d9d1ca510fcfd0 1440w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=1620&amp;height=1092&amp;format=webp&amp;quality=70&amp;v=1d9d1ca510fcfd0 1620w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=1800&amp;height=1213&amp;format=webp&amp;quality=70&amp;v=1d9d1ca510fcfd0 1800w" srcset="/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=325&amp;height=219&amp;format=webp&amp;quality=20&amp;v=1d9d1ca510fcfd0" type="image/webp" data-sizes="auto" />

<source data-srcset="/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=180&amp;height=121&amp;format=jpg&amp;quality=70&amp;v=1d9d1ca510fcfd0 180w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=360&amp;height=243&amp;format=jpg&amp;quality=70&amp;v=1d9d1ca510fcfd0 360w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=540&amp;height=364&amp;format=jpg&amp;quality=70&amp;v=1d9d1ca510fcfd0 540w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=720&amp;height=485&amp;format=jpg&amp;quality=70&amp;v=1d9d1ca510fcfd0 720w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=900&amp;height=606&amp;format=jpg&amp;quality=70&amp;v=1d9d1ca510fcfd0 900w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=1080&amp;height=728&amp;format=jpg&amp;quality=70&amp;v=1d9d1ca510fcfd0 1080w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=1260&amp;height=849&amp;format=jpg&amp;quality=70&amp;v=1d9d1ca510fcfd0 1260w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=1440&amp;height=970&amp;format=jpg&amp;quality=70&amp;v=1d9d1ca510fcfd0 1440w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=1620&amp;height=1092&amp;format=jpg&amp;quality=70&amp;v=1d9d1ca510fcfd0 1620w,/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=1800&amp;height=1213&amp;format=jpg&amp;quality=70&amp;v=1d9d1ca510fcfd0 1800w" srcset="/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=325&amp;height=219&amp;format=jpg&amp;quality=20&amp;v=1d9d1ca510fcfd0" type="image/jpeg" data-sizes="auto" />
<img src="/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=325&amp;height=219&amp;format=jpg&amp;quality=20&amp;v=1d9d1ca510fcfd0" data-src="/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=650&amp;height=438&amp;format=jpg&amp;v=1d9d1ca510fcfd0" class="lazyload" data-sizes="auto" alt="Deer" width="650" height="438" />
</picture>

Note: everything looks and work great !

When running on our production server we get this output in (using slimsy 4.1.0 beta 3) :

<picture class="block mb-6">
<source data-srcset="/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=180&amp;height=121&amp;format=webp&amp;quality=75&amp;v=1d9d1ca2a74b1b0 180w" srcset="/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=325&amp;height=219&amp;format=webp&amp;quality=20&amp;v=1d9d1ca2a74b1b0" type="image/webp" data-sizes="auto" />

<source data-srcset="/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=180&amp;height=121&amp;quality=70&amp;v=1d9d1ca2a74b1b0 180w" srcset="/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=325&amp;height=219&amp;format=&amp;quality=20&amp;v=1d9d1ca2a74b1b0" type="" data-sizes="auto" />
<img src="/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=325&amp;height=219&amp;format=&amp;quality=20&amp;v=1d9d1ca2a74b1b0" data-src="/media/md0g0ixd/deer.jpg?rxy=0.47,0.4880239520958084&amp;width=650&amp;height=438&amp;format=&amp;v=1d9d1ca2a74b1b0" class="lazyload" data-sizes="auto" alt="Deer" width="650" height="438" />
</picture>

Note: It only shows the first first version, 180w.

We tried with latest beta release, beta 4, but now we only get this result: <img src="/media/md0g0ixd/deer.jpg" class="lazyload" alt="Deer" width="650" height="438" /> Note: No picture tag at all, it also drops our two tailwind classes "block" and "mb-6"

Our local dev setup is using windows 11 latest IIS and our production server is using "Debian GNU/Linux 11 (bullseye) - mcr.microsoft.com/dotnet/aspnet:7.0"

Our appsettings looks like this:

"Slimsy": {
  "WidthStep": 180,
  "UseCropAsSrc": true,
  "DefaultQuality": 70,
  "TagHelper": {
    "DefaultPictureSources": [
      {
        "Extension": "webp",
        "Quality": "75"
      }
    ],
    "ImageDimensions": true
  }
},

We used to have "SingleSources" in "TagHelper", but I dropped that thinking that might be related to our first issue only getting the first 180w. But that didn't affect anything sadly.

Any ideas where to continue to debug and identify what the issue is would be awesome, thanks!

seanhakbb commented 1 year ago

When updating to beta 4, we could again use @using Slimsy.Enums (this namespace wasn't available in Beta 3, so we removed it). This seems to have solved the problem on our Linux hosting environment and everything works fine now both in local and production!