javascript - Why is my image hosted on Imgur not loading on some mobile devices? - Stack Overflow

admin管理员组

文章数量:1122832

Clearly explain your issue, for example:

I’m working on a project in plain HTML, CSS, and JavaScript. I use an image hosted on Imgur (.jpeg) as the background for a canvas.

The image loads fine on desktop browsers and some mobile devices. However, it fails to load on certain phones (e.g., iPhones or specific Android devices). Problem encountered: When the image doesn’t load, it doesn’t appear at all. There are no specific error messages in the browser console.

Hypotheses:

It could be a compatibility issue with Imgur hosting. It might be related to CORS restrictions or the image format.

Describe what you’ve already tried, for example:

Checked the image URL directly in mobile browsers: It works fine on desktops but inconsistently on some phones. Added crossOrigin = "Anonymous" when loading the image in JavaScript, but the issue persists. Tested different browsers (Chrome, Safari, etc.), but the results vary. Expected result: I expected the image to load correctly on all devices.

app on live: /

load image function

---javascript

async loadFlyerBase() {
                try {
                    const flyerUrlJpg = '.jpeg';
                    const flyerUrlWebP = '/forex.webp';
                    
                    // Détection support WebP
                    const isWebPSupported = this.isWebPSupported();
                    const flyerUrl = isWebPSupported ? flyerUrlWebP : flyerUrlJpg;
                    
                    // Tentative de récupération depuis le cache
                    if ('caches' in window) {
                        const cache = await caches.open('flyer-cache-v2');
                        let cachedResponse = await cache.match(flyerUrl);
                        
                        if (!cachedResponse) {
                            await cache.add(flyerUrl);
                            cachedResponse = await cache.match(flyerUrl);
                        }
                        
                        if (cachedResponse) {
                            const blob = await cachedResponse.blob();
                            this.flyerBase = await this.loadImage(URL.createObjectURL(blob));
                        }
                    }

                    // Si pas de cache, chargement direct
                    if (!this.flyerBase) {
                        this.flyerBase = await this.loadImage(flyerUrl);
                    }

                    await this.renderFlyer();
                    this.showProgress(100);
                } catch (error) {
                    console.error('Erreur chargement base:', error);
                    this.showMessage('Erreur lors du chargement du modèle', 'error');
                    throw error;
                }
            }

            // Méthode de détection WebP
            isWebPSupported() {
                try {
                    return document.createElement('canvas')
                        .toDataURL('image/webp')
                        .indexOf('data:image/webp') === 0;
                } catch(err) {
                    return false;
                }
            }

            loadImage(src) {
                return new Promise((resolve, reject) => {
                    const img = new Image();
                    img.onload = () => resolve(img);
                    img.onerror = () => reject(new Error(`Chargement image échoué: ${src}`));
                    img.crossOrigin = 'Anonymous';
                    img.src = src;
                });
            }

            async handleImageUpload(event) {
                const file = event.target.files[0];
                if (!file) return;

                // Validation du format
                const validTypes = ['image/jpeg', 'image/png', 'image/webp'];
                if (!validTypes.includes(file.type)) {
                    this.showMessage('Format non supporté. Utilisez JPG, PNG ou WebP', 'error');
                    return;
                }

                // Validation de la taille
                if (file.size > 10 * 1024 * 1024) {
                    this.showMessage('Image trop volumineuse (max 10 Mo)', 'error');
                    return;
                }

                this.loadingOverlay.style.display = 'flex';
                this.showProgress(0);

                try {
                    // Compression de l'image avant traitement
                    const compressedFile = await thispressImage(file);
                    const imageUrl = URL.createObjectURL(compressedFile);
                    
                    this.cropperImage.onload = () => {
                        this.previewPlaceholder.style.display = 'none';
                        this.cropperImage.style.display = 'block';

                        if (this.cropper) {
                            this.cropper.destroy();
                        }

                        // Configuration du cropper
                        this.cropper = new Cropper(this.cropperImage, {
                            aspectRatio: 1,
                            viewMode: 2,
                            dragMode: 'move',
                            autoCropArea: 0.8,
                            restore: false,
                            guides: true,
                            center: true,
                            highlight: false,
                            cropBoxMovable: true,
                            cropBoxResizable: true,
                            toggleDragModeOnDblclick: false,
                            minContainerWidth: 250,
                            minContainerHeight: 250,
                        });

                        this.cropBtn.disabled = false;
                        this.loadingOverlay.style.display = 'none';
                        this.showMessage('Image chargée avec succès', 'success');
                    };

                    this.cropperImage.src = imageUrl;
                } catch (error) {
                    console.error('Erreur traitement image:', error);
                    this.showMessage('Erreur lors du traitement de l\'image', 'error');
                    this.loadingOverlay.style.display = 'none';
                }
            }

本文标签： javascriptWhy is my image hosted on Imgur not loading on some mobile devicesStack Overflow