Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add alt to <Image> component #74

Closed
Giggiux opened this issue Nov 12, 2020 · 5 comments
Closed

How to add alt to <Image> component #74

Giggiux opened this issue Nov 12, 2020 · 5 comments

Comments

@Giggiux
Copy link

Giggiux commented Nov 12, 2020

for SEO optimization the image's alt tag is needed.

It would be optimal to have it on the Image component.

@gokcan
Copy link
Owner

gokcan commented Dec 11, 2020

You may use the NativeImgProps prop to pass alt to the underlying <img>.

@gokcan gokcan closed this as completed Dec 11, 2020
@gokcan gokcan pinned this issue Jul 27, 2021
@gokcan gokcan changed the title alt Tag is missing from image props How to add alt to <Image> component Jul 27, 2021
@arifals27
Copy link

You may use the NativeImgProps prop to pass alt to the underlying <img>.

can you give example how to use NativeImgProps

@Giggiux
Copy link
Author

Giggiux commented Dec 16, 2022

@arifals27 I haven't used this in 2 years now, but I guess you may just do something like <Image NativeImgProps={{alt:"my alt text"}}>

here is the line that adds that NativeImgProps to the Image props

@gokcan
Copy link
Owner

gokcan commented Apr 10, 2023

Example usage:

import React from 'react'
import { Image, Breathing } from 'react-shimmer'

function App() {
  return (
    <div>
      <Image
        src='https://source.unsplash.com/random/800x600'
        fallback={<Breathing width={800} height={600} />}
        NativeImgProps={{ alt: "Descriptive text." }}
      />
    </div>
  )
}

@rajnikantwebdev
Copy link

Hey thank you for this wonderful package, but i have a question regarding alt text. I am using it the same way as you mentioned but the alt text is not visible.
alttext

in browser it is visible something like this

alttext2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants