Add attribute draggable to images created with gatsby-image

[guayom]

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): gatsby@1.9.112
• 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 <mathews.kyle@gmail.com>",
  "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"
  }
}

[KyleAMathews]

Hmmm yeah, we're not passing down additional attributes like this

gatsby/packages/gatsby-image/src/index.js

Line 384 in 47a35aa

<Img

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

[guayom]

Sure, I'll give it a try. It might take me some time, because I'm not very experienced with react.

[ajayns]

I'd like to try and help with this if it's still not fixed @KyleAMathews @guayom

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

[xxczaki]

@ajayns Are you still interested in that issue? If not, I would like to fix that 😄

[ajayns]

Please do go ahead @xxczaki

[bargangilo]

Does anyone have a workaround for this in the meantime? Tried putting the user-drag: none on the wrapping div and the image still seems to drag.

[xxczaki]

@bargangilo you can use imgStyle={{WebkitUserDrag: 'none'}} on the <Img/> for Webkit browsers 😄

[moonmeister]

Closed by #14738