javascript - 如何使浏览器缓存图像做出反应？

Question

class ItemGrid extends React.Component {

handleCart = (id) => {
    this.props.addFunction(id);
}

render() {
    const { classes } = this.props;
    var itemArray = this.props.items;
    var newArray = [];
    for (var i = 0; i < itemArray.length; i++) {
        if (itemArray[i].category == 6) {
            newArray.push(itemArray[i]);
        }
    }
    for (var i = 0; i < itemArray.length; i++) {
        if (itemArray[i].category != 6) {
            newArray.push(itemArray[i]);
        }
    }
    itemArray = newArray;
    return (
        <div className={classes.root}>
        <Grid container spacing={8} className={classes.container}>
            <Grid item xs={12}>
                <Grid container className="item-grid" justify="space-evenly" alighitems="center" spacing={0}>
                    {itemArray.map(function(item, id) {
                    return  <Paper className={classes.gridItem} key={id}>
                        {getImage(classes, item)}
                        <Typography className={classes.itemName}>{item.name}</Typography>
                        <Typography className={classes.itemPrice}>Price: {numberWithCommas(item.price)} ISK</Typography>
                        <div className={classes.addButtonDiv}>
                        <Button variant="contained" className={classes.addButton} onClick={() => this.handleCart(item.id)}>
                            Add to cart
                            <CartIcon/>
                        </Button>
                        </div>
                        </Paper>
                    }, this)}
                </Grid>
            </Grid>
        </Grid>
        </div>
    );
}
}

function getImage(classes, item) {
if (item.category == 6) {
    return <div className={classes.itemImg}><img src={"https://image.eveonline.com/Render/" + item.id + "_256.png"} alt={item[1]} className={classes.itemImg}></img></div>
} else {
    return <div className={classes.itemImg}><img src={"https://image.eveonline.com/Type/" + item.id + "_64.png"} alt={item[1]} className={classes.itemImg}></img></div>
}
}

所以我在这个用户可以购买的项目网格的顶部有一个搜索栏。每次我搜索时，我都会看到“从 image.eveonline.com 获取数据”消息，所以我假设浏览器没有正确缓存图像以供以后使用。当组件重新渲染时缓存的图像被破坏？有什么方法可以保存它们吗？