icaraps / gatsby-remark-images-remote

Processes images in markdown so they can be used in the production build.
MIT License
2 stars 6 forks source link

Images stay blurry #2

Open wahidshafique opened 2 years ago

wahidshafique commented 2 years ago

https://gyazo.com/ec7f006e8f659d6487f0cedc8cb836b0

When using this plugin with gatsby-plugin-mdx, configured like this

{
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: 'gatsby-remark-images-remote',
          },
        ],
        plugins: [`gatsby-remark-images-remote`],
      },
    },

My images are continually blurry when they are rendered. Is there a way to turn off this optimization or fix it in any way?

icaraps commented 2 years ago

@wahidshafique you can try these options:

gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images-remote`,
            options: {
              linkImagesToOriginal: false,
              disableBgImage: true,
              backgroundColor: 'none'
        }
]
wahidshafique commented 2 years ago

@icaraps Doing so now shows nothing, seems like the opacity for the image I care about does not actually become 1. It's a little time consuming to recreate this but I will try. My current workaround is simply to add this to my css

.gatsby-resp-image-image {
  opacity: 1 !important;
}