javascript - The image referenced in vue fails to load when deployed to the server

Question

Directory Structure:

Code:

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

It can be loaded normally when running on the local server,
But it cannot be loaded when placed on the server (tomcat). The project is deployed in the webapp/myproject/ directory,
The image path that should be requested on the server is http:// 1.1.1.1:8080/myproject...
But the actual requested image path is http://1.1.1.1:8080/static/im...
How to write the image path as the current directory in vue Instead of the server root directory

Answer 1

I have encountered this problem before and it has been compiled into a document. What you need to modify is the webpack configuration and then repackage it

Answer 2

I have also encountered this. When it is placed on the server, the image path at this time should be an absolute path. When it is local, press the <img src="./title.png" /> path. When it is placed on the server, it is < ;img src="/myproject/static/img/title.45ae5f4.png" />. Of course the above method is better

Answer 3

If you are using scaffolding, please familiarize yourself with the uses of several JSs in config, especially index.js

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