页面获取服务器图片路径问题

最新推荐文章于 2022-07-20 16:04:24 发布
最新推荐文章于 2022-07-20 16:04:24 发布
阅读量8.2k 收藏 4
点赞数
CC 4.0 BY-SA版权
分类专栏： 技术 文章标签： tomcat 服务器 图片 myeclipse ssh
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liusuyao/article/details/71079478
本文介绍如何在Tomcat服务器上正确配置图片的相对路径，包括修改server.xml文件的具体步骤及注意事项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在做页面上传时遇到这个问题，卡了很久，但是还是解决了，所以写下来给大家分享下。

我的项目用的是ssh框架，服务器是Tomcat 7。

一开始，不知道服务器上的图片不能用绝对路径访问，所以当我用绝对路径访问图片页面显示不了图片是很不解。后来百度之后才知道，把图片放到服务器上之后路径会改变，所以最好用相对路径。

那么这个相对路径又是什么呢？这个就需要在server.xml中设置了：

1.先找到正确的server.xml。为什么说是正确的server.xml呢，因为你在tomcat里面会找到多个server.xml，一个需要用Tomcat的startup.bat启动才有效果，一个在MyEclipse里启动就可以。下面是MyEclipse里启动的server.xml路径：

2.找到server.xml后在<Host></Host>中添加一行代码：<Context path="/upload" docBase="E:\apache-tomcat-7.0.72\webapps\ROOT\WEB-INF\upload" reloadable="false"/>

3.在页面上图片名字前面加上path属性“/upload”就行了。path的值可以随意取。

注意：docBase中的路径最好按照图片上的格式，因为我之前看过的文章里很多都是E://apache-tomcat-7.0.72//webapps……这种格式，但是貌似不太靠谱，因为项目在这里报了错，所以提醒下。如果文章有什么问题，欢迎评论~

获取服务器上图片的位置,怎么获取服务器上的图片地址
weixin_39601657的博客
08-07 1238
怎么获取服务器上的图片地址 内容精选换一换图片组件作为一个基本组件，用于展示图片。用户可以通过属性“图片地址”，来选择图片。业务接入DDoS高防后，经过高防转发的流量到服务端之后真实源IP将被隐藏，在业务应用开发中，通常需要获取客户端真实的IP地址。例如，投票系统为了防止刷票，需要通过获取客户端真实IP地址，限制每个客户端IP地址只能投票一次。本章节介绍如何通过安装DDoS高防提供的TOA模块获取...
网络交互——实现从服务器获取文件(例如：图片)
qq_31562487的博客
06-04 790
网络交互——实现从服务器获取文件(例如：图片) 一   需求：创建一个Tomcat服务器， 实现从Tomcat服务器中获取一张图片显示在界面中 涉及到的问题： 1：Android在4.x版本之后就限制了在主线程不能执行联网操作 会抛出异常 处理方式： 2：子线程不能直接操作界面，所以要用到消息机制Handler 2-1：当子线程在操作界面时抛出异常
云服务器下面的项目的图片路径问题
qq_36080060的博客
08-15 1806
尽量把图片放在该项目里面，在项目里面webroot下面新建一个文件夹比如说img，把图片放进去 在引用的时候要用相对路径，不能使用图片在服务器的存储地址，否则会发生只能在服务器上面可见， 外网不可见，使用的时候要用片在该项目下的相对路径，比如在webroot的img文件夹下的1.jpg， 使用的时候要写 img\1.jpg    注意开头的时候不能用\，否则则会默认使用的是绝对路径   ...
上传图片并保存到服务器上之后，如何得到该图片服务器路径(http://~)
热门推荐
记录、分享
02-13 2万+
<br />1. 情景描述<br />2. 测试代码<br /><br /> 1. 情景描述<br /> <br />首先使用asp.net中自带空间FileUpload将图片上传到服务器上之后，在“在线编辑器”中需要显示该图片，需要得到该图片的以http://开头的url路径<br /> <br />2. 测试代码<br /> <br />其实只需要使用 System.Web.UI.Control.ResolveUrl (string)，其中string参数是上传图片的相对路径。<br /> <br />
Linux配置访问服务器图片路径（防止踩坑）
shiluhuia的博客
07-20 5376
linux配置访问服务器图片路径
在服务器端保存图片时无法保存到指定路径
weixin_45963617的博客
12-11 832
一、问题 复现使用小波去噪+SR实现对抗样本防御时，在windows端可以保存到指定路径，而在服务器端保存图片时无法保存到指定路径。 二、问题及解决方法 问题： imageio.imwrite(('..\\experiment\\test\\results-{}\\{}_x{}_{}.png'.format(d.dataset.name, filename[0], scale,p)), tensor_cpu.numpy()) windows端可以识别"\"路径，而服务器端直接保存为文件
网站图片路径怎么改服务器,改服务器图片路径
weixin_31572321的博客
08-13 550
改服务器图片路径 内容精选换一换部署提供可视化、一键式部署服务，支持并行部署和流水线无缝集成，实现部署环境标准化和部署过程自动化。本节通过以下五步介绍如何使用部署服务将归档在软件发布库的软件包部署到云主机上。第一步：准备弹性云服务器第二步：添加授信主机第三步：新建部署任务第四步：执行部署任务第五步：验证部署结果“音频解析器”需要部署到Ubuntu系统服务器上才可以运行。提交批量图像内容审核任务，返...
Tomcat服务器，与获取服务器图片搭配使用
06-15
【标题】：“Tomcat服务器，与获取服务器图片搭配使用” 【描述】：“Tomcat服务器，与获取服务器图片搭配使用”这一主题主要涉及如何在Tomcat服务器上部署和管理应用程序，特别是那些涉及到图像资源的Web应用。...
解决vue的 v-for 循环中图片加载路径问题
10-18
1. **路径问题**：图片路径可能没有正确地指向资源。例如，如果图片存储在`src/img`目录下，但Vue CLI打包后，图片路径会改变，需要使用相对路径或者绝对路径来确保在生产环境中也能找到图片。 2. **懒加载**：在...
Java web开发中加载图片路径的两种方式
08-29
下面将详细介绍两种在IDEA（IntelliJ IDEA）中使用Tomcat服务器加载图片路径的方法。 ### 方法一：相对路径 #### 1. **理解相对路径** 相对路径是相对于当前页面URL的路径。在HTML或JSP文件中，如果你使用的是...
利用getObjectURL获取图片路径实现本地预览上传图片
11-27
我们可以将这个URL赋值给`<img>`标签的`src`属性，从而在页面上显示用户选择的图片。 实现这个功能通常包括以下几个步骤： 1. **监听文件输入事件**：首先，我们需要在HTML中添加一个`<input type="file">`元素，...
浏览器中访问Linux服务器上的图片(虚拟路径) + 重启tomcat
心雨先生
04-15 2179
1,确定图片真实路径 图片Linux真实路径：/opt/nfs1/1.png 2.配置的tomcat的服务器文件 vim tomcat/conf/server.xml 添加<Context docBase ="/opt/nfs1/" path ="/pic" debug ="0" reloadable ="true"/>docBase为你的图片路径path里的是你随意...
图片上传到服务器，存储路径和查看图片的设置
qq_33834732的博客
07-24 5695
图片上传到服务器，两种路径选择方式： 选择路径的原因：如果选择绝对路径，图片会存在项目根目录下，这样的弊端是，如果项目重新发布，连带着旧项目的图片一并删掉了，除非手动先保存别的地方再拿过来。 选择相对路径，图片可以放在tomcat的webapps下面，这样的好处是，更新项目，图片还是存在的，但是访问的时候还得对tomcat的server.xml进行配置才能访问 配置如下： server.x
php windows图片路径问题,解决PHP在Windows IIS 上传的图片无法访问的问题
weixin_29038303的博客
03-11 275
最后在windows下使用IIS配置的PHP无法上传文件的解决方法这篇文章的帮助下成功解决了该问题问题总结：在Windows平台下如果PHP使用的是IIS的话那么php在上传文件时是先将文件上传到一个临时目录下的(该配置项可以在php.ini的"upload_tmp_dir"里进行配置，由于我们的服务器并没有进行过配置，所以php将使用系统的临时目录"C:\Windows\Temp")...
这几道tomcat面试题，最后两道难倒我了
田维常
01-19 862
即将进入金三银四的黄金时段，所以很多人已经开始准备自己的面试抱佛脚了。今天我整理了6道关于tomcat的核心面试题以及参看答案，看完对于绝大多数人应对面试妥妥的。1、Tomcat的缺省端...
解决文件上传后前台读取上传图片显示路径失效
一颗橘子的博客
12-14 1807
需求：线上服务器为windowsServer系统，文件上传后存放的路径为某盘符下xxx文件夹，页面通过src=" " 引用时出现路径报错导致图片无法显示问题的解决。 问题分析：项目打成jar包后，页面引用图片无法识别盘符 如 D:/img/4541afdsa565562af.jpg文件，页面引用该图片是无效的。 解决方案：在服务器上安装Tomcat 来对文件存储路径进行映射 安装Tomcat客户端 打开conf文件夹下的server.xml进行编辑，在对应位置粘贴如下代码 <!-- doc
web 读取服务器某路径的图片，页面进行显示
weixin_34408717的博客
05-11 1767
2019独角兽企业重金招聘Python工程师标准>>> ...
上传图片到服务器系列之----前后台路径获取问题
sophiaFXR的博客
04-11 1万+
Java上传图片到服务器系列之----前后台路径获取问题 note：有差错或不足之处请批评指正，谢谢！ 1.后台获取待上传图片的保存路径 （1）在WebContent（使用eclipse的情况下，若使用的IDE为MyEclipse，则为WebRoot）下创建一个保存图片的文件夹，如：uploadPic，待web项目在服务器上启动后，服务器上就会有对应的文件夹目录存在。 （2）为处理图片上传
Windows下测试可以，部署到nginx服务器，加载不了图片，静态文件的问题！
liyr_zwx的博客
12-12 419
改目录的权限“chmod -R 777 网站目录” 最近自己想买个服务器自己玩玩，试着在虚拟机了搭建环境，nginx+mysql+php刚开始很顺利，网站都布置好了，用物理机访问，只能加载HTML文件的，css、js、图片都加载不过来。刚开始以为是路径错误，各种改，相对路径，绝对路径都试了，还是不行。弄了好久，看了很多尝试了很多都没用，后面才发现创建网站目录是用root来创建，拷贝代码也用root，然后去查看了权限，并把权限改了（chmod -R 777 网站目录）然后再去访问就可以获取图片，网页就完整的加
有服务器图片路径，vue前端显示
最新发布
03-20
### 如何在 Vue 前端通过服务器返回的图片路径展示图片 为了实现 Vue 前端能够正确显示来自服务器的图片路径，可以按照以下方法操作： #### 1. 处理相对路径问题 当后端传递的是部分地址而非完整的 URL 地址时，前端需要拼接完整的路径才能正常访问资源。可以通过 JavaScript 动态处理路径并赋值到 `src` 属性中。 示例代码如下： ```html <template> <div> <!-- 使用动态绑定 src --> <img :src="completeImageUrl" alt="Image from server" class="image"> </div> </template> <script> export default { data() { return { pictureUrl: '', // 存储从后端接收的部分路径 baseUrl: 'http://localhost:8088', // 定义基础URL }; }, computed: { completeImageUrl() { return `${this.baseUrl}${this.pictureUrl}`; // 拼接完整路径 } }, created() { this.fetchPictureUrl(); // 调用接口获取图片路径 }, methods: { fetchPictureUrl() { // 模拟异步请求获取后端数据 setTimeout(() => { this.pictureUrl = '/example/path/to/image.jpg'; // 设置部分路径 }, 1000); } } }; </script> ``` 上述代码展示了如何将后端传回的部分路径与基础 URL 进行拼接[^1]，并通过计算属性生成最终的完整路径用于 `<img>` 的 `src` 绑定。 --- #### 2. 避免 Webpack 打包路径冲突 如果项目中有静态资源文件夹（如 `/static` 或 `/public`），需要注意区分本地图片和远程图片的路径设置方式。对于远程图片路径，建议直接使用绝对路径或者动态拼接的方式，而不是依赖 Webpack 的配置修改[^2]。 错误做法： 尝试通过调整 Webpack 的 `publicPath` 来解决路径问题可能会导致 CSS 和其他静态资源路径受到影响。 推荐做法： 针对不同类型的图片分别处理其路径逻辑。例如，如果是网络上的图片，则无需引入模块化工具（如 `require`）。而对于本地图片则需采用模块化的导入方式。 --- #### 3. 正确渲染数组中的多张图片 如果有多个图片需要展示，通常会结合 `v-for` 指令遍历列表项，并为每一张图片单独构建路径。 以下是具体实现案例： ```html <template> <div> <div v-for="(item, index) in imageList" :key="index"> <img :src="getCompleteImagePath(item)" style="width: 80%; margin: 3% 0% 3% 8%;" /> </div> </div> </template> <script> export default { data() { return { imageList: [], // 图片路径集合 apiBaseUrl: 'http://your-server-url/api/', // API的基础URL }; }, mounted() { this.loadImages(); }, methods: { loadImages() { // 模拟从API获取图片路径列表 const mockData = [ { id: 1, path: '/images/1.png' }, { id: 2, path: '/images/2.png' }, ]; this.imageList = mockData.map((data) => data.path); // 提取path字段作为图片路径 }, getCompleteImagePath(path) { return `${this.apiBaseUrl}file${path}`; // 构建完整路径 } } }; </script> ``` 在此例子中，利用了函数 `getCompleteImagePath()` 对每一项路径进行了加工处理[^3]，从而确保所有图片都能被正确加载。 --- #### 4. 性能优化注意事项 除了功能层面外，在实际开发过程中还需要关注性能表现。比如避免不必要的 HTTP 请求以及减少大尺寸图片带来的延迟等问题。可借助第三方库或工具对页面进行评估改进[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值