Image without attributes

This demo uses gatsby-remark-images.

Order of plugins in your gatsby-config.js matters. Please add gatsby-remark-image-attributes after gatsby-remark-images or any other image processing plugins!

![no attributes](./gatsby-logo.png 'No attributes, here')

no attributes

CSS Properties

To use CSS properties like box-shadow, add them to the title!

![test](./gatsby-logo.png '#box-shadow=0px 0px 10px 2px rgb(2, 2, 2);width=150px')

test

Positioning

gatsby-remark-image-attributes wraps the result of other image processing plugins, aiming to reach body as the wrapper's offsetParent. Your styleAttributes will be set on that wrapper, not the <img>.

<body>
position: relative
other plugin's wrapper
position: absolute
<img>
image-attributes' wrapper
position: absolute
position: relative
<img>
other plugin's wrapper
image-attributes' wrapper

Compare the offsetParents of these two images to see the difference:

no-remark-images with-remark-images

This is the ribbon in the upper-right corner of this page:

![fork me on github](./fmog.png '#position=absolute;right=0;top=0;width=150px;height=150px')

fork me on github

SVG

This plugin generates <img> tags and all browsers support SVG in <img> Elements.

![svg](./gatsby-logo.svg '#height=150px;filter=hue-rotate(-282deg) brightness(1.5) drop-shadow(2px 4px 6px black)')

svg

Inline and Lists

works ![gatsby](./gatsby-logo.png '#width=32px;vertical-align=text-bottom') inline ![gatsby](./gatsby-logo.png '#width=32px;vertical-align=middle'), too ![gatsby](./gatsby-logo.png '#width=32px;vertical-align=text-top')

works gatsby inline gatsby , too gatsby 

* or ![gatsby](./gatsby-logo.png'#width=24px;vertical-align=middle')
* in ![gatsby](./gatsby-logo.png '#width=24px;vertical-align=middle;margin-top=10px;margin-bottom=10px')
* lists ![gatsby](./gatsby-logo.png '#width=24px;vertical-align=middle')
  • or gatsby
  • in gatsby
  • lists gatsby

data-* attributes

Set the plugin's dataAttributes option to true to enable data- attributes.

![gatsby](./gatsby-logo.png '#some=value with spaces;another=without;width=32px;vertical-align=middle')

'Inspect' this Element ⇒ gatsby to see data-some and data-another on it!

Unlike the styleAttributes, dataAttributes are always set on the <img> Element, never on the wrapper.

title="" attribute

Without image attributes

Titles without key=value; pairs behave according to the CommonMark standard; even when they start with a #.

![no attributes](./gatsby-logo.png '#this is just a title, despite starting with a #')

no attributes

With image attributes

To add an actual title="" attribute to the <img>, add an image attribute with key: title.

![title from attribute](./gatsby-logo.png '#width=64px;some=data;title=This has a title from image attributes')

title from attribute