Mengapa Saya Tidak Boleh Memuatkan Imej Setempat dalam Apl Reaksi Saya?

Imej Tempatan Tidak Dimuatkan dalam Apl React

Latar Belakang:

Imej tempatan kadangkala gagal dimuatkan dalam apl React, walaupun paparan imej luaran berjaya. Ini boleh menjadi isu yang mengecewakan, terutamanya bagi pembangun yang bergantung pada imej tempatan untuk reka bentuk dan kefungsian.

Penyelesaian masalah:

Masalah selalunya terletak pada cara imej diperoleh dalam aplikasi React. Inilah sebabnya:

• Penyepaduan Pek Web: Apabila menggunakan Webpack dalam projek React, imej perlu secara jelas diperlukan sebelum Webpack boleh memproses dan menggantikan laluan sumbernya.
• Isu Laluan Fail: Hanya menyediakan laluan fail relatif atau mutlak untuk imej dalam atribut src tidak akan berfungsi.

Penyelesaian:

Untuk menyelesaikan isu ini, gunakan fungsi require() untuk mengimport imej setempat. Berikut ialah contoh:

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="home-container">
                <div className="home-content">
                    <div className="home-text">
                        <h1>foo</h1>
                    </div>
                    <div className="home-arrow">
                        <p className="arrow-text">
                            Vzdělání
                        </p>
                        <img src={require('/images/resto.png')} />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

Dengan menggunakan require('/images/resto.png'), anda mengarahkan Webpack untuk memproses imej dan menggantikan laluan sumber dengan sewajarnya. Ini memastikan bahawa imej dimuatkan dan dipaparkan dengan betul dalam aplikasi.

Atas ialah kandungan terperinci Mengapa Saya Tidak Boleh Memuatkan Imej Setempat dalam Apl Reaksi Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!