Display the same image on render

[ghost]

While rendering, the ProcessImage component has a strange behavior. It displays the same image on a map loop during a second. As if it populates each item with the first image loaded and processed and then only displays the correct image. On a classical <img> tag, I don't have this behavior.

render() {
    const { products } = this.state;
    return (
      <div className="page">
        {products.map(product => 
          <div className="productGrid" key={product.objectID}>
            <h1>{product.title}</h1>  
            <ProcessImage
              image={product.imageUrl}
              resize={{ width: 200, height: 200 }}
               />
            <p>{product.description}</p>
            <p>Price: {product.price}</p>
          </div>
        )}
      </div>
    );
  }

[nitin42]

Set 'storage' prop to false and let me know!

[nitin42]

I am using progressive image loader also so may be its due that? It takes a second or two to display processed image.

[nitin42]

Looking at your example, I don't think so you need ProcessImage component. You could use a img tag and then according to your business logic, process those images! (Also note that worker thread consumes CPU cycles and ProcessImage uses web worker by default.

[ghost]

Setting 'storage' to false resolve the behavior. Thanks. My example is simple and effectively could be replaced by an img tag. But I want something to filter images taken by users in order to have some harmony on the page. Is that the right tool?

[nitin42]

Yup! It's perfect for your use case.

[ghost]

Perfect. What is the purpose of the storage props? Do I have to set it to 'true' in production mode?

[nitin42]

I am using localStorage api to store the consequent processed images. If you disable it then you will see that the component will first render the original image then display the processed image.

[nitin42]

I think no changes are required so we can close this !