Gatsby: Add attribute draggable to images created with gatsby-image

Created on 21 Mar 2018 · 9Comments · Source: gatsbyjs/gatsby

Description

I can't find the way to add the attribute draggable="false" to images with gatsby-image

Steps to reproduce

This markup creates image tags that don't have the attribute "draggable"

<Img 
      sizes={image}
      alt={title}
      style={{ maxWidth: `100%`, userDrag: `none`, userSelect: `none`, }} 
      draggable={false}
    />

Expected result

I would expect to have a way to add the attribute "draggable" to images created with gatsby-image.

Actual result

The only way I found, was to add it via css on a container div (I'm using styled components):

const ImageContainer = styled.div`
  img {
    user-drag: none;
    user-select: none;
  }
`

Environment

Gatsby version (npm list gatsby): [email protected]
gatsby-cli version (gatsby --version): 1.1.11
Node.js version: v6.11.4
Operating System: MAC OS 10.12.5

File contents (if changed):

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Tarjetas de Crédito Costa Rica`,
    siteURL: 'https://tarjetas.baccredomatic.com/',
    siteName: 'Tarjetas de Crédito Costa Rica',
    description: 'Conocé las tarjetas de crédito de BAC Credomatic Costa Rica y descubrí cuál es la mejor para vos.'
  },
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "UA-68007908-1",
      },
    },
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: `9cds0lha1plv`,
        accessToken: `7d2b95ab7da57baf4f3a4f555b0cb2cf4e5b9d1c8e0721b49dbbb154bac8a771`,
      },
    },
    {
      resolve: `gatsby-plugin-google-tagmanager`,
      options: {
        id: "GTM-KG5PX2S",
        includeInDevelopment: false,
      },
    },
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
  ],
}

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "babel": {
    "presets": [
      "env"
    ]
  },
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "gatsby": "^1.9.17",
    "gatsby-image": "^1.0.41",
    "gatsby-link": "^1.6.15",
    "gatsby-plugin-google-analytics": "^1.0.15",
    "gatsby-plugin-google-tagmanager": "^1.0.12",
    "gatsby-plugin-react-helmet": "^1.0.8",
    "gatsby-plugin-sharp": "^1.6.37",
    "gatsby-plugin-styled-components": "^2.0.2",
    "gatsby-source-contentful": "^1.3.23",
    "gatsby-transformer-sharp": "^1.6.22",
    "loaders.css": "^0.1.2",
    "react-draggable": "^3.0.5",
    "react-helmet": "^5.2.0",
    "react-icons": "^2.2.7",
    "react-loaders": "^3.0.1",
    "react-redux": "5.0.5",
    "react-transition-group": "^2.2.1",
    "redux": "3.6.0",
    "styled-components": "^2.2.3",
    "styled-components-breakpoint": "^1.0.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.6.1"
  }
}

Source

guayom

👍3

Most helpful comment

Please do go ahead @xxczaki

ajayns on 27 Jan 2019

❤2

All 9 comments

Hmmm yeah, we're not passing down additional attributes like this https://github.com/gatsbyjs/gatsby/blob/47a35aad300b9789ed328146fb71449652f4d101/packages/gatsby-image/src/index.js#L384

Would you be interested in creating a PR to fix this? You can follow the pattern for passing in extra props described here https://reactjs.org/warnings/unknown-prop.html