LoremPixel組件總是呈現相同的圖像

Question

這是我建立了一個LoremPixel組件：

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, 
}; 

我應該得到的寬度200，高度400每一次隨機圖像，而是我總是看到相同的圖像在我所有的LoremPixel組件。

我把它在我的組件，如：

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> 
); 

從Book組件被稱爲在Bookshelf組件：

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

Answer 1

我想你會得到相同的圖像因爲緩存。您可以將當前時間戳添加到網址以避免這種情況：

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