javascript – Das in vue referenzierte Bild kann bei der Bereitstellung auf dem Server nicht geladen werden

Question

Verzeichnisstruktur:

Code:

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

Es kann normal geladen werden, wenn es auf dem lokalen Server ausgeführt wird.
Es kann jedoch nicht geladen werden, wenn es auf dem Server (Tomcat) platziert wird. Das Projekt wird im Verzeichnis webapp/myproject/ bereitgestellt.
Der Bildpfad, der auf dem angefordert werden sollte Server ist http://1.1.1.1:8080/ myproject...
Aber der tatsächlich angeforderte Bildpfad ist http://1.1.1.1:8080/static/im...
So schreiben Sie den Bildpfad in Vue als das aktuelle Verzeichnis anstelle des Server-Stammverzeichnisses

Answer 1

这个问题我之前遇到过，已经整理成文档，你需要修改的是webpack配置，然后重新打包就可

Answer 2

刚好这个我也遇到过，放在服务器时此时的图片路径应该是绝对路径，在本地时就按<img src="./title.png" />路径，在服务器时就是<img src="/myproject/static/img/title.45ae5f4.png" />。当然上面的方法更加好

Answer 3

你如果用的脚手架，请熟悉下config里面几个JS的用途，尤其是index.js

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