Γιατί αποτυγχάνει μία εικόνα ενώ η υπόλοιπη σελίδα φορτώνει

Η σελίδα φορτώνει, το κείμενο αποδίδεται και μία εικόνα μένει σπασμένο εικονίδιο. Η πρώτη αντίδραση είναι να κατηγορήσουμε τη σήραγγα, γιατί η σήραγγα είναι αυτό που άλλαξε. Πριν από αυτό, βρείτε ποιο URL ζήτησε πραγματικά το πρόγραμμα περιήγησης για εκείνη την εικόνα, γιατί το URL της σελίδας και το URL της εικόνας είναι δύο διαφορετικά στοιχεία απόδειξης. Οι περισσότερες αναφορές για εικόνα που λείπει καταλήγουν σε έναν κεντρικό υπολογιστή που δεν έλαβε ποτέ ένα λειτουργικό αίτημα, και αυτή η απάντηση κοστίζει μία ματιά στον πίνακα Δίκτυο.

Τρεις συνθήκες καθορίζουν πού να κοιτάξετε

Η πρώτη συνθήκη είναι αν η εικόνα προέρχεται από τον ίδιο κεντρικό υπολογιστή με τη σελίδα. Ένας ξεχωριστός κεντρικός υπολογιστής εικόνων χρειάζεται τη δική του επίλυση ονομάτων, τη δική του σύνδεση και τη δική του ταυτότητα TLS, οπότε μια σελίδα που φορτώνει δεν λέει τίποτα γι’ αυτόν.

Η δεύτερη είναι αν το πρόγραμμα περιήγησης μπλόκαρε το αίτημα πριν το στείλει. Μικτό περιεχόμενο, πολιτική ασφάλειας περιεχομένου και κανόνες παραπομπέα μπορούν να σταματήσουν μια εικόνα χωρίς να παραγάγουν μια συνηθισμένη απάντηση διακομιστή, γι’ αυτό δεν εμφανίζεται κανένα αποτυχημένο αίτημα στη λίστα.

Η τρίτη είναι αν η παράδοση πέτυχε και η απόδοση απέτυχε, μια περίπτωση όπου τα byte φτάνουν και η εικόνα εξακολουθεί να μην εμφανίζεται. Αυτές οι τρεις συνθήκες έχουν τρεις διαφορετικούς ιδιοκτήτες, και μόνο η πρώτη είναι ζήτημα δικτύου.

Βρείτε τον πόρο που επέλεξε πραγματικά το πρόγραμμα περιήγησης

Το URL που βλέπετε στον πηγαίο κώδικα της σελίδας συχνά δεν είναι το URL που ζητήθηκε. Τα σύνολα πηγών, τα στοιχεία picture και τα φόντα CSS επιτρέπουν στο πρόγραμμα περιήγησης να επιλέξει διαφορετικό πόρο με βάση το πλάτος της θύρας προβολής, την πυκνότητα pixel ή την υποστήριξη μορφής. Μια εικόνα με οκνηρή φόρτωση μπορεί να μη ζητηθεί καθόλου μέχρι η σελίδα να φτάσει σε μια συγκεκριμένη κατάσταση.

Εξετάστε το στοιχείο και το αίτημα μαζί, και κρατήστε τον εκκινητή μαζί με το αίτημα όταν αναφέρετε το πρόβλημα. Η αναφορά του στοιχείου εικόνας του MDN καλύπτει την επιλογή πηγής, τη συμπεριφορά φόρτωσης και τους ελέγχους παραπομπέα σε ένα σημείο, που αρκεί για να δείτε ποιο χαρακτηριστικό επέλεξε το αποτυχημένο URL.

Καταγράψτε το όνομα κεντρικού υπολογιστή, την κατάσταση, τυχόν αλυσίδα ανακατευθύνσεων και τον τύπο περιεχομένου της απάντησης. Μια απάντηση 200 που επιστρέφει σελίδα σύνδεσης δεν είναι χρησιμοποιήσιμη εικόνα, και μια ανακατεύθυνση σε σελίδα σφάλματος HTML μοιάζει ίδια με ένα κατεστραμμένο αρχείο μέχρι να διαβάσετε τον τύπο.

Διαβάστε την κατάσταση πριν από το δίκτυο

Το τέλος χρόνου, το απορριφθέν αίτημα και το σφάλμα αποκωδικοποίησης απαιτούν διαφορετικά επόμενα βήματα, και ο κωδικός κατάστασης είναι αυτό που τα ξεχωρίζει. Το τέλος χρόνου δείχνει σε επίλυση ονομάτων, διαδρομή ή κεντρικό υπολογιστή που δεν απαντά. Το απορριφθέν αίτημα δείχνει σε πολιτική ή σε επίπεδο εξουσιοδότησης. Το σφάλμα αποκωδικοποίησης δείχνει στα byte ή στη μορφή.

Αν το αίτημα δεν εμφανιστεί καθόλου, σταματήστε να κοιτάτε το δίκτυο και κοιτάξτε τη σήμανση. Η συνηθέστερη αιτία είναι μια καταχώριση σε σύνολο πηγών που προτίμησε το πρόγραμμα περιήγησης και που δεν υπάρχει πια στον διακομιστή, ακολουθούμενη από ένα στοιχείο που ένα σενάριο δεν έκανε ποτέ ορατό.

Αυτή η διάκριση και μόνο αποτρέπει το μεγαλύτερο μέρος της χαμένης προσπάθειας σε αυτή την κατηγορία αναφορών.

Όταν το μπλοκάρει το πρόγραμμα περιήγησης, δεν υπάρχει απάντηση να διαβάσετε

Το μικτό περιεχόμενο είναι η κλασική περίπτωση: μια σελίδα HTTPS που ζητά εικόνα μέσω απλού HTTP έχει το αίτημα μπλοκαρισμένο αντί για αποτυχημένο, και η κονσόλα καταγράφει τον λόγο. Η πολιτική ασφάλειας περιεχομένου παράγει την ίδια μορφή, με την μπλοκαρισμένη οδηγία να αναφέρεται στο μήνυμα. Μια πολιτική παραπομπέα που αφαιρεί την κεφαλίδα μπορεί επίσης να κάνει έναν κεντρικό υπολογιστή με προστασία hotlink να επιστρέψει σύμβολο κράτησης θέσης αντί για την εικόνα.

Διαβάστε τον καταγεγραμμένο λόγο πριν αγγίξετε τη διαδρομή δικτύου, γιατί αυτά τα μπλοκαρίσματα δεν βελτιώνονται όταν αλλάζει η διαδρομή. Η προσθήκη αδειών μεταξύ προελεύσεων δεν είναι ούτε αυτή η λύση: η εμφάνιση εικόνας από άλλον κεντρικό υπολογιστή και η ανάγνωση των pixel της σε canvas είναι διαφορετικές λειτουργίες, και μόνο η δεύτερη χρειάζεται τις κεφαλίδες που επικολλούν οι άνθρωποι.

Για έναν ιστότοπο που διαχειρίζεστε, διορθώστε το URL του πόρου, την απάντηση ή την πολιτική στον ιδιοκτήτη της και κρατήστε τις απαιτήσεις εξουσιοδότησης και παραπομπέα άθικτες. Για έναν ιστότοπο που δεν ελέγχετε, στείλτε τη σελίδα και τα στοιχεία του αιτήματος στο κανάλι υποστήριξής του αντί να αναδημοσιεύετε ιδιωτικούς ή λήγοντες συνδέσμους πόρων.

Συγκρίνετε διαδρομές χωρίς να αλλάζετε τα στοιχεία

Αν θέλετε πραγματικά να δοκιμάσετε τη διαδρομή πρόσβασης, κρατήστε όλα τα άλλα σταθερά: ίδια σελίδα, ίδιος λογαριασμός, ίδια επιλεγμένη εικόνα, μία επιτρεπόμενη διαδρομή αλλαγμένη. Συγκρίνετε τις καταχωρίσεις αιτημάτων δίπλα-δίπλα αντί για το αποδιδόμενο αποτέλεσμα, γιατί το αποδιδόμενο αποτέλεσμα λέει αν εμφανίστηκε η εικόνα, όχι γιατί.

Μια εικόνα που φορτώνει σε νέα διαδρομή δεν αποδεικνύει ότι η διαδρομή είναι εξουσιοδοτημένη, και μια εικόνα που μένει σπασμένη δεν αποδεικνύει ότι φταίει η σήραγγα. Αν η εικόνα αφαιρέθηκε ή η πρόσβαση περιορίζεται σκόπιμα, χρησιμοποιήστε μια υποστηριζόμενη εναλλακτική αντί να απενεργοποιήσετε τους ελέγχους πιστοποιητικών ή να αντιγράψετε προστατευμένο υλικό άλλου.

Σειρά εργασίας: εντοπίστε το επιλεγμένο URL, διαβάστε την κατάσταση και τον τύπο του, ελέγξτε για καταγεγραμμένο λόγο μπλοκαρίσματος και μετά συγκρίνετε μία αλλαγή διαδρομής τη φορά.