search

DonRai / react-image-webp

React component for check browser support format .webp and insert if supported this image
MIT License
44 stars 8 forks source link

Still brings in PNGS even when it's a WebP supported browser. #1

Closed dekkofilms closed 7 years ago

dekkofilms commented 7 years ago

I brought in this library, and I guess I might be missing something, or I can't get the expected behavior to work. 

<Image
  style={{width: '100%', height: 500, objectFit: 'cover'}}
  webp={require("../../../src/assets/images/banner1.webp")}
  src={require("../../../src/assets/images/banner1.png")}
/>

I import image into my project, and when I check the network tab on browser it still shows it bringing in and using the png resource and not the webp resource. I tested to make sure it wasn't a browser issue allowing webp, so I just used this right below the Image import:

<img style={{width: '100%', height: 500, objectFit: 'cover'}} src={require("../../../src/assets/images/banner2.webp")}/>

and that brings in the WebP image as expected. So I know WebP works on the browser.

Any guidance or help would be appreciated!

DonRai commented 7 years ago

Hi @dekkofilms Yes, I had a bug in code. I fixed it and create demo https://donrai.github.io/react-image-webp/examples/index.html Thank you for informing me!