I am building a react blog and my images won't load. It shows me this message in console - src\components\BlogPost\index.js
Line 21:11: Redundant alt attribute. Screen-readers already announce `img` tags as an image. You don’t need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the alt prop jsx-a11y/img-redundant-alt.
My source:
const BlogPost = (props) => {
return(
<div className="blogPostContainer">
<Card>
<div className="blogHeader">
<span className="blogCategory">Featured</span>
<h1 className="postTitle">..</h1>
<span className="postedBy">..</span>
</div>
<div className="postimageContainer">
<img src={require('../../blogPostimages/memories-from.jpg')} alt="Post image" />
</div>
</Card>
</div> )
}
Please help. Thank you.
<img src="example" aria-hidden alt="Picture of me taking a photo of an image" />
add "aria-hidden "
Redundant alt attribute warning doesn't prevent image loading. It means there is a meaningless alt in your image. alt attribute is useful for accessibility and must describe the image if the download fails.
Use an accurate description for images or alt="" for backgrounds and decorations.
Loading errors probably are caused by imports errors. Check image path, name, and location.
Here an example of an image import.
import logo from '../static/logo.png';
export default function Navbar() {
return (
<img src={logo} alt='website logo' />
)
}
Related
I have a nextjs blog that I'm working on and one of the components I'm using is this card component:
function Card(props) {
return (
<div className="uk-card uk-card-default uk-width-1-2#m">
<div className="uk-card-header">
<div
className="uk-grid-small uk-flex-middle"
uk-grid
uk-scrollspy="cls: uk-animation-slide-left; repeat: true"
>
<div className="uk-width-auto">
<Image
alt="Profile Picture"
className="uk-border-circle"
src={props.pic}
height={200}
width={200}
/>
</div>
<div className="uk-width-expand">
<h3 className="uk-card-title uk-margin-remove-bottom">
{props.name}
</h3>
</div>
</div>
</div>
<div className="uk-card-body">
<p>{props.description}</p>
</div>
<div className="uk-card-footer">
</div>
</div>
)
}
I take that component and use it in the page like so:
export default Main =()=> {
return(
<Card
pic={placeholderpic}
linkedin='https://www.linkedin.com/'
name="Harry Truman"
description="Lorem ipsum"
/>
)
}
The icon in the footer does not render until the page is refreshed 3-4 times. All the rest of the card renders properly on first load. Ideally I'd like to know 3 things:
A. Why this is occurring?
B. How to troubleshoot this in the future?
C. What the most appropriate fix is for this.
Edit:
This question is essentially the same as mine:
Uikit Icons with React and Next.js
The solution for me is less than ideal, I don't want to wrap everything in a custom "UIKit" component.
In my project I need to link a img src dynamically.
This is the whole project structure:
I have tried multiple ways to link up my imag src in the follwing component, as you can see in the out commented part of my code.
The path itself cannot be the problem because the third try, which I cannot use cause its not dynamic, works very well.
What am I doin wrong?
import React from 'react';
import * as CommentStyles from './comment.module.scss';
// Only this works
import Image from '../../../../assets/image-anne.jpg';
function Comment({comment}) {
return (
<div>
<div className={CommentStyles.firstRow}>
{/* first try - didn`t work*/}
{/* <img src={require('../../../../assets/image-anne.jpg')} /> */}
{/* second try - didn`t work*/}
{/* <img src={'../../../../assets/image-anne.jpg'}/> */}
{/* third try - didn`t work*/}
<img src='../../../../assets/image-anne.jpg'/>
{/* fourth try-works: */}
{/* <img src={Image}/> */}
<div className="firstFlexItem">
<div className="name Username">
{comment.user.name} <br/>
{comment.user.username}
</div>
</div>
<p>
Reply
</p>
</div>
</div>
)
}
export default Comment
I have now put the jpg in the public folder and it doesn`t work:
I'm assuming you have created your reactjs project using the create-react-app command.
Since you want to dynamically set the image src attribute, the workaround would be to add the image or images inside the public folder as advised here in the official documentation : https://create-react-app.dev/docs/using-the-public-folder/#when-to-use-the-public-folder
Then just use
<img src={`image-anne.jpg`} />
Where src has the path to your image relative to the public folder. This can also be dynamically set and will work just fine
NOTE : If this doesn't work, use
<img src={process.env.PUBLIC_URL + '/image-anne.jpg'} />
And make sure you kill the current session and restart your app using npm start or yarn start if you still can't see the image.
Screenshot from above link :
Up until a few days ago, my implementation of LazyLoad was working perfectly, but now I can't seem to get it to work.
This is my component:
import React from 'react';
import LazyLoad from 'react-lazyload';
import './image.scss';
const Image = image => (
<LazyLoad height={200} offset={100} once>
<div
className="image-container"
orientation={image.orientation}>
<img
className="image"
src={image.url}
alt={image.alt}
/>
{'caption' in image &&
<div className="meta">
<p className="caption">{image.caption}</p>
<p className="order">{image.currentNumber}/{image.maxNumber}</p>
</div>
}
</div>
</LazyLoad>
)
export default Image
And in App.js it is called like this:
render() {
return (
<div className="wrapper">
<GalleryTop details={this.state.gallery_top} />
{this.state.images.map((image, index) => <Image key={index} {...image} /> )}
</div>
)
}
But it won't work! Here's the demo environment:
https://gifted-kare-1c0eba.netlify.com/
(Check Network tab in Inspector to see that images are all requested from initial load)
There's also a video here
Any idea about what I am doing wrong?
Thanks in advance,
Morten
I ran into similar issues with the npm package react-lazyload. For one, this package only allows one child per LazyLoad component, so you would have to rearrange your hierarchy to make it work. Secondly, I found some strange behaviors when loading images that were already set within the viewport. The documentation does list import {forceCheck} from 'react-lazyload'; combined with forceCheck(); as a means of manually checking the elements, but I found this inconvenient and insufficient for components that aren't rerendering.
I was able to obtain the exact same functionalities with an easier implementation from the alternative package react-lazy-load. Mind the hyphen. This package also requires node>0.14. More or less, it does the same thing. You can read their documentation here: react-lazy-load
I want to have an image in the background of a div without a const.
I need the image to be a background image, so I can put text over it.
I want to avoid hardcoding the background image in a sass file. However, I am curious how it is written in a sass file.
The following is just an image, not a background image:
class Card extends Component {
render() {
return (
<div className='home-card-view flex-center'>
<div>
<img className='home-card-image' src="https://thumbnail.imageurlpathlsakfjlsdfj)" />
<h2 className='home-card-title'> Title </h2>
<h4> Subtitle stuf that should explain more </h4>
</div>
</div>
)
}
}
export default Card
Can I get a background image in a div in React?
Also how would it be done in the Sass file.
If you have many elements you want to do this and you want to abstract away as much as possible to the Sass file and you're ok targeting modern browsers only, you can use CSS custom properties.
In your Sass file:
.home-card-image{
background-image:url( var(--homeCardImage) );
[background-position, size, etc...]
}
and then in React, you just set the custom property to whatever you want:
class Card extends Component {
render() {
return (
<div className='home-card-view flex-center'
style='--homeCardImage: "YOUR-IMAGE-URL-HERE"'>
<div>
<h2 className='home-card-title'> Title </h2>
<h4> Subtitle stuf that should explain more </h4>
</div>
</div>
)
}
}
export default Card
Why might you do this? Well, if you want to allow yourself to do something more than just a single background-image in future you can. For example, if you wanted to overlay a second background-image with a gradient overlay, you could do that just in the sass file, like so:
.home-card-image{
background-image:url( var(--homeCardImage) ), linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5);
[background-position, size, etc...]
}
And you wouldn't need to touch the React component.
Just apply inline style to the component that you want to have the background-image property (Example below)
class Card extends Component {
render() {
const image_url = 'YOUR IMAGE URL';
return (
<div className='home-card-view flex-center'
style={{ backgroundImage : `url(${image_url})` }}>
<div>
<img className='home-card-image' src="https://thumbnail.imageurlpathlsakfjlsdfj)" />
<h2 className='home-card-title'> Title </h2>
<h4> Subtitle stuf that should explain more </h4>
</div>
</div>
)
}
}
export default Card
The robot images on the web page should be different depending on the robot id passed into the url but the web page shows all the same robot image. The following shows the part of the React JS codes.
import React from 'react';
const Card = ({name, email, id}) => {
return (
<div className='tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5'>
<img alt='robots' src={'https://robohash.org/${id}&200x200'} />
<div>
<h2>{name}</h2>
<p>{email}</p>
</div>
</div>
);
}
export default Card;
Obviously the problem occurs at src={'https://robohash.org/${id}&200x200'}. Please help how to set the src part. Thank you.
You have to use a back tick here not single quote.
Check by changing single quote to back tick ` and then see if src is formed correctly
<img alt='robots' src={`https://robohash.org/${id}&200x200`} />