1

The Problem

I would like to have the ability to wrap text around images in markdown. I am usin gatsby-remark-images alongside gatsby-transformer-remark. My gatsiby-config.js file is below.

I have set the float property using the wrapperStyle option of gatsby-remark-images. This does get translated into the style for the span containing the image, but the span has no width, so the image is not displayed on the page.

enter image description here

Now, if I open up dev tools and set a width on the span, I get the image.

enter image description here

So, the problem is that I need a way to set the width of the image in markdown and have gatsby-remark-images translate that size onto the span. It would also be nice to be able to choose the float location of the image in the markdown. Are either of these things possible?

Gatsby config

module.exports = {
  plugins: [
    ...
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 500,
              wrapperStyle : `float: right; `
            },
          },
        ],
      },
    },
    ...
}

The Markdown

# Some Title

<img width="300" src="../../static/images/air-flow.jpg">

The image should wrap around this paragraph but it is not. I need to set a width
on the image so that it can be displayed
4

0 回答 0