Feature Request: image without wrapper

[therealgilles]

I have not found a way to get an image from gatsby-plugin-image without a wrapper. Let me know if I missed the option. Otherwise it would be a great feature to have when the wrapper is unnecessary.

[ascorbic]

Hi. We need the wrapper to handle sizing and placeholders, so the only scenario where this would be possible would be if the image was fixed size and had no placeholder. If that's the case, try importing MainImage instead and use it like so: <MainImage {...image.images} width={x} height={x} />.

[therealgilles]

Thank you for the response. I will give it a go.

I have been facing an unexpected situation with an image with a dropdown menu, like a user avatar with an account details / logout dropdown like this:

I am using the @headlessui/react package, which usually works on button clicks. I added mousenter/mouseleave events to make the dropdown open/close on hover. This works fine if the dropdown is attached to a div with text or an icon or an img/picture element.

If the div has a StaticImage child, moving the mouse over the image would either not create a mouseenter event, or create a mouseenter event (if the button had some padding around the image) but then a mouseleave event as the pointer moved over the image, resulting in the dropdown not opening or opening and closing right away. The mouseover event works fine, but I would prefer to use mouseenter.

I thought maybe the events behave differently when over an image/picture element, so I manually reproduced the html structure and css of the StaticImage component, but the dropdown worked as expected in that case.

I finally found a workaround by adding a 'pointer-events: none' tag to StaticImage (which gets attached to the wrapper). I have reproduced the issue in both Chrome, Safari, and Firefox (on Mac OS 11.3) so it does not seem to be a browser issue. I could not find anything mouse/pointer events related in the gatsby-plugin-image code, so I'm a bit puzzled. I know React handles these events slightly differently than regular JS but, as stated above, the dropdown worked when replacing StaticImage with other elements, so hard to think it's React related.

QUESTION: Is there a simple gatsby codesandbox out there I can use to try to build a small testcase? even better if it already includes gatsby-plugin-image.

[therealgilles]

I was able to find a starter gatsby sandbox. Here is my testcase: https://codesandbox.io/s/gatsby-plugin-image-dropdown-g7s77

It shows the broken dropdown and the dropdown with the workaround.