Analisis dan selesaikan masalah bahawa gambar rangkaian luaran Vue tidak dapat dipaparkan

Apabila menggunakan Vue untuk membangunkan tapak web atau aplikasi, anda sering menghadapi situasi di mana imej rangkaian luaran tidak dapat dipaparkan dengan betul Ini mungkin disebabkan oleh pelbagai faktor. Artikel ini akan membincangkan isu ini dan cara menyelesaikannya.

1. Punca masalah

1. Masalah merentas domain

Apabila anda menggunakan URL luaran untuk mendapatkan sumber imej dalam aplikasi Vue, disebabkan kepada Sekatan dasar keselamatan, penyemak imbas akan menafikan akses kepada sumber daripada hos lain. Ini dipanggil masalah merentas domain.

Ini kerana secara lalai, JavaScript hanya boleh mengakses sumber di bawah nama domain, port dan protokol yang sama seperti halaman semasa Ini adalah strategi keselamatan untuk menghalang penyerang daripada menyerang tapak web berniat jahat melalui skrip merentas domain.

2. Ralat pautan imej

Sebab lain yang mungkin ialah pautan imej yang anda berikan tidak betul atau tamat tempoh. Ini adalah salah satu ralat yang paling biasa dan biasanya disebabkan oleh pelayan luaran yang menukar laluan imej atau memadamkan imej.

3. Kegagalan Pelayan

Apabila fail imej yang anda minta terletak pada pelayan, maka apabila pelayan gagal, sumber imej anda tidak akan dapat diakses atau dimuatkan.

2. Kaedah untuk menyelesaikan masalah merentas domain

Untuk menyelesaikan masalah merentas domain, anda perlu menetapkan fail pengepala HTTP aplikasi Vue untuk membenarkan akses kepada sumber luaran. Jika anda seorang pembangun yang telah menguasai teknologi back-end, anda boleh menyediakan CORS (Cross-Origin Resource Sharing) pada bahagian pelayan.

Jika anda tidak mempunyai pengetahuan teknikal bahagian pelayan, anda boleh menggunakan kaedah proksi terbalik untuk menyelesaikan isu merentas domain. Pendekatan ini biasanya sesuai untuk persekitaran pembangunan kerana dalam persekitaran pengeluaran anda memerlukan penyelesaian yang lebih baik untuk mengelakkan masalah keselamatan yang berpotensi.

Begini cara menggunakan proksi terbalik untuk menyelesaikan isu merentas domain:

1. Konfigurasikan fail config/index.js aplikasi Vue dan tambah medan ProksiTable pada pilihan dev:

module.exports = {
  dev: {
    // ...
    proxyTable: {
      '/api': {
        target: 'http://example.com',
        changeOrigin: true
      }
    }
  }
}

Dalam konfigurasi di atas, kami memajukan semua permintaan API aplikasi ke 'http://example.com/api'. Pilihan changeOrigin digunakan untuk mengarahkan pelayan menerima sepenuhnya permintaan klien untuk mengakses sumber luaran.

2. Mulakan semula aplikasi Vue dan semak sama ada isu merentas domain telah diselesaikan.

3. Penyelesaian lain

1. Semak sama ada pautan imej itu betul

Seperti yang dinyatakan sebelum ini, anda perlu memastikan pautan itu adalah betul, jika tidak anda Pelayar tidak akan dapat mengakses sumber imej. Anda boleh menguji kesahihan pautan dengan membukanya dalam penyemak imbas anda dan menyemak sama ada anda boleh mengakses imej tersebut.

2. Gunakan CDN

Menggunakan CDN (Rangkaian Penghantaran Kandungan) boleh mempercepatkan pemuatan imej anda dan mengurangkan risiko isu merentas domain. Anda boleh menggunakan perkhidmatan CDN sumber terbuka seperti Bootstrap cdn atau Google Fonts cdn dalam apl Vue anda.

3. Sahkan kegagalan pelayan

Jika anda tidak boleh memuatkan imej dalam aplikasi Vue anda, sila semak sama ada fail yang sepadan rosak atau sama ada pelayan itu rosak. Jika pelayan tidak berfungsi, anda boleh menghubungi pentadbir untuk pembaikan atau kemas kini.

Kesimpulan

Menangani isu pemuatan imej dalam apl Vue anda mungkin memerlukan sedikit usaha, tetapi selagi anda memahami punca isu ini dan mengetahui cara menyelesaikannya, anda akan dapat mencapai hasil yang lebih baik Pengalaman pengguna dan prestasi aplikasi yang lebih tinggi. Cuba cadangan di atas dan pilih penyelesaian terbaik untuk apl Vue anda berdasarkan situasi khusus anda.

Atas ialah kandungan terperinci Analisis dan selesaikan masalah bahawa gambar rangkaian luaran Vue tidak dapat dipaparkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!