javascript - vue里引用的图片 部署到服务器加载失败
问题描述
目录结构:
代码:
<img src='https://www.haobala.com/wenda/title.png' />
在本地服务器运行可以正常加载, 但是放到服务器(tomcat)上就无法加载, 项目部署在webapp/myproject/目录,在服务器应该请求的图片路径是http://1.1.1.1:8080/myproject...但是实际请求的图片路径是http://1.1.1.1:8080/static/im...请问如何在vue里把图片路径写成当前目录而不是服务器根目录
问题解答
回答1:这个问题我之前遇到过,已经整理成文档,你需要修改的是webpack配置,然后重新打包就可
回答2:刚好这个我也遇到过,放在服务器时此时的图片路径应该是绝对路径,在本地时就按<img src='https://www.haobala.com/wenda/title.png' />路径,在服务器时就是<img src='https://www.haobala.com/myproject/static/img/title.45ae5f4.png' />。当然上面的方法更加好
回答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, }
相关文章:
1. javascript - 在静态页面上用load 引入的页面文件问题?2. javascript - webpack打包后的bundlejs文件代码不知道什么意思.3. android - RxJavar用什么操作符可以使数据每隔一段时间取出一个4. Android的webView如何实现网页 录音功能?5. Java游戏服务器开发和网站、app服务端的开发都差不多的吗???实现的思路和方法6. css - 关于ul的布局7. html - 哪些情况下float会失效?8. javascript - vue组件通过eventBus通信时,报错a.$on is not a function9. java - oracle对汉字字段按照拼音排序的函数和sql语句是什么?10. css - 如何使用 vue transition 实现 ios 按钮一样的平滑切换效果
