javascript - Imej yang dirujuk dalam vue gagal dimuatkan apabila digunakan ke pelayan

Question

Struktur direktori:

Kod:

<img src="./title.png" />

Ia boleh dimuatkan secara normal apabila dijalankan pada pelayan tempatan,
Tetapi ia tidak boleh dimuatkan apabila diletakkan pada pelayan (tomcat Projek ini digunakan dalam direktori webapp/myproject/,
Laluan imej yang harus diminta pada). pelayan ialah http://1.1.1.1:8080/ myproject...
Tetapi laluan imej yang diminta sebenarnya ialah http://1.1.1.1:8080/static/im...
Cara menulis laluan imej dalam vue as direktori semasa dan bukannya direktori akar pelayan

Answer 1

Saya pernah menghadapi masalah ini sebelum ini dan ia telah disusun ke dalam dokumen Apa yang anda perlu ubah suai ialah konfigurasi webpack dan kemudian membungkusnya semula

Answer 2

Saya juga pernah mengalami perkara ini Apabila ia diletakkan pada pelayan, laluan imej pada masa ini harus menjadi laluan mutlak Apabila ia adalah setempat, tekan laluan <img src="./title.png" /> . Apabila ia diletakkan pada pelayan, ia adalah &lt ;img src="/myproject/static/img/title.45ae5f4.png" />. Sudah tentu kaedah di atas lebih baik

Answer 3

Jika anda menggunakan perancah, sila biasakan diri anda dengan penggunaan beberapa JS dalam konfigurasi, terutamanya index.js

build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static', // 附件资源引用子目录
        assetsPublicPath: '项目正式地址', // 服务器资源引用根目录
        productionSourceMap: true,
    }