zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-06-01 10:07:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] ImageLoader: ImageUriCache is not kept up to date with loaded images

Browse Source 
Close #2493
This commit is contained in:
Peter Velkov
2023-02-23 13:56:58 +02:00
committed by Nicolas Gallagher
parent 36f46b3510
commit e722282c09
2 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native-web/src/exports/Image/index.js
Vendored
+1 -1
View File
@@ -327,7 +327,7 @@ const BaseImage: ImageComponent = React.forwardRef((props, ref) => {
function abortPendingRequest() { function abortPendingRequest() {
if (requestRef.current != null) { if (requestRef.current != null) {
ImageLoader.abort(requestRef.current); ImageLoader.clear(requestRef.current);
requestRef.current = null; requestRef.current = null;
} }
} }
packages/react-native-web/src/modules/ImageLoader/index.js
Vendored
+9 -8
View File
@@ -74,12 +74,13 @@ let id = 0;
const requests = {}; const requests = {};
const ImageLoader = { const ImageLoader = {
abort(requestId: number) { clear(requestId: number) {
let image = requests[`${requestId}`]; const image = requests[`${requestId}`];
if (image) { if (image) {
image.onerror = null; image.onerror = null;
image.onload = null; image.onload = null;
image = null; ImageUriCache.remove(image.src);
image.src = '';
delete requests[`${requestId}`]; delete requests[`${requestId}`];
} }
}, },
@@ -102,7 +103,7 @@ const ImageLoader = {
} }
} }
if (complete) { if (complete) {
ImageLoader.abort(requestId); ImageLoader.clear(requestId);
clearInterval(interval); clearInterval(interval);
} }
} }
@@ -111,7 +112,7 @@ const ImageLoader = {
if (typeof failure === 'function') { if (typeof failure === 'function') {
failure(); failure();
} }
ImageLoader.abort(requestId); ImageLoader.clear(requestId);
clearInterval(interval); clearInterval(interval);
} }
}, },
@@ -123,6 +124,7 @@ const ImageLoader = {
const image = new window.Image(); const image = new window.Image();
image.onerror = onError; image.onerror = onError;
image.onload = (nativeEvent) => { image.onload = (nativeEvent) => {
ImageUriCache.add(uri);
// avoid blocking the main thread // avoid blocking the main thread
const onDecode = () => { const onDecode = () => {
// Append `source` to match RN's ImageLoadEvent interface // Append `source` to match RN's ImageLoadEvent interface
@@ -185,9 +187,8 @@ const ImageLoader = {
ImageLoader.load( ImageLoader.load(
uri, uri,
() => { () => {
// Add the uri to the cache so it can be immediately displayed when used // load() adds the uri to the cache so it can be immediately displayed when used,
// but also immediately remove it to correctly reflect that it has no active references // but we also immediately remove it to correctly reflect that it has no active references
ImageUriCache.add(uri);
ImageUriCache.remove(uri); ImageUriCache.remove(uri);
resolve(); resolve();
}, },