Bug: <img> within a <picture> is being requested twice in Firefox #20682
Description
When I have an <img> within a <picture> element, e.g for implementing responsive images, then Firefox requests that image file twice. Some of the times the first request to the image will stop with an NS_BINDING_ABORTED, it'll always return receive 0 bytes, and the server will log a 499 response (client closed request) or a 200. Removing the <picture> element and simply leaving <img> in the JSX, solves the problem, but of course I do need the <picture>. This happens in Firefox 84 and 85 (private mode, no extensions), and does not happen in Chrome.
An important detail is that this only happens when rendering through react, either in dev mode or build mode (in create-react-app). If I save the generated HTML and render it without any JavaScript, then the double request never happens again.
React version: 17.0.1 (happens in 16 too)
JS:
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
<picture>
<img src="https://via.placeholder.com/300x300?text=JPG" alt="JPG" width="300" height="300" />
</picture>,
window.document.getElementById("root")
);HTML:
<!doctype html>
<html>
<body>
<div id="root"></div>
</body>
</html>Live example: https://luues.csb.app/
Result screenshot of network tab:
In case it helps, note that in the following example, the first (broken) request will be for the jpg image, and then another for the correct webp one:
<picture>
<source srcSet="https://via.placeholder.com/300x300?text=WEBP" type="image/webp" />
<img src="https://via.placeholder.com/300x300?text=JPG" alt="JPG" width="300" height="300" />
</picture>