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()}`;