Ich bin auf dieses Problem gestoßen, als ich die Befehlszeile „cnpm run build“ zum Packen und Bereitstellen des vue.js-Projekts verwendet habe. Bitten Sie um Hilfe T T
Zunächst wird der Hintergrund-Tomcat mit dem Anwendungskontext xxx konfiguriert, sodass der Stammpfad des Servers zu http://localhost:8080/xxx wird
Setzen Sie nun das Bild auf <img src="../../assets/ad.png">
Nach dem Packen und Bereitstellen kann das Bild nicht angezeigt werden und wenn Sie das Element anzeigen, wird es zu <img src ="/static/img/ ad.22bf537.png">
Fehlerbericht kann nicht geladen werden http://localhost:8080/static/...
Ändern Sie den Pfad direkt zu <img src="./static/img/ad.22bf537.png"> und er wird angezeigt
Wie sollen wir dieses Problem also vor dem Verpacken lösen?
vue-cli的脚手架默认都是按照生产环境的项目来构建的,大概意思就是直接构建一个项目,而非某项目下的一个小模块。于是,一般的网站会把static放在网站根目录下。你可以打开build以后生成的dist目录,里面的结构如下:
那么楼主你的问题无非两种解决方式:
修改最终资源位置,例如将static放到项目根目录
修改页面中对资源的引用链接
第一种无需解释了,移动一下目录位置就好了。
第二种有很多种方法,但最好还是通过修改webpack的配置来达到目标。建议楼主可以多看看webpack的配置文件~
当我将assetsPublicPath修改成/public/后,输出的index.html的资源链接变化了:
另外有一种万能的方法,使用
string-replace-loader
,简单来说就是匹配字符串然后替换,具体说明可以看这里。希望对你有帮助吧。
或者将图片的路径require('图片路径')作为img的src 你试试这样的方法