vamsiampolu vamsiampolu - 22 days ago 6
React JSX Question

LoremPixel component always renders same image

This is a

LoremPixel
component that I built:

export default function LoremPixel({ url = 'http://lorempixel.com', width = 200, height = 400, alt = 'Placeholder image' }) {
const src = `${url}/${width}/${height}`;
return (<img className={centerImage} src={src} alt={alt} />);
}

const { string, number, oneOf } = PropTypes;

LoremPixel.propTypes = {
url: string,
height: oneOf(string, number),
width: oneOf(string, number),
alt: string,
};


I am supposed to get a randomized image of width 200 and height 400 every single time but instead I always see the same image in all my
LoremPixel
components.

Cute puppy lorempixel repeated image

I call it in my component like:

return (
<Card containerStyle={containerStyle}>
<CardHeader
title={title}
style={headerRootStyle}
textStyle={cardHeaderTextStyle}
titleStyle={titleStyle}
/>
<span className={authorStyle}>{author}</span>
<CardMedia>
<LoremPixel width={200} height={100} />
</CardMedia>
<CardText style={textStyle}>
<LoremIpsum />
</CardText>
<CardActions style={actionsStyle}>
<FlatButton label="Buy Now" />
</CardActions>
</Card>
);


from the
Book
component which is called in a
Bookshelf
component:

Books = books.map(book => (<div
key={uuid.v4()}
className={colFixedWidth}
{...firstChild}
{...secondChild}
>
<Book {...book} />
</div>),
);

Answer

I think you get the same image because of cache. You can add current timestamp to the url to avoid that:

const src = `${url}/${width}/${height}?t=${Date.now()}`;