中文命名的图片加载后 本地能显示 但放到服务器上就出不来了

最新推荐文章于 2022-12-06 15:46:25 发布
原创 最新推荐文章于 2022-12-06 15:46:25 发布 · 540 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Tomcat #百度 #XML

本文探讨了使用中文命名的图片文件在不同环境下加载显示的问题。详细介绍了如何通过配置Tomcat服务器来支持中文文件名，并提供了修改代码实现图片正确显示的方法。
中文命名的图片加载后 本地能显示 但放到服务器上就出不来了

---》问题
图片名称为 ‘百度.gif’
代码 <mx:Image source="百度.gif"/>

本地能显示图片

[img]http://dl.iteye.com/upload/attachment/422937/0b0a1d27-5c6f-3708-a6ce-133f5da093fd.jpg[/img]

服务器上就不能显示了

[img]http://dl.iteye.com/upload/attachment/422938/58444833-a08c-3436-b829-21970069c472.jpg[/img]

----》解决方案
步骤1 ：把tomcat的编码格式设为utf-8;设置方法为：tomcat安装目录下的conf/server.xml的 <Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443"
URIEncoding="UTF-8" /

步骤2：把地址进行转码
<mx:Image source="{encodeURI('百度.gif')}"/>
----》出现另一个问题
虽然这样做服务器上是能显示了 但本地的图片就不能显示了。

-----》测试程序
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
	<mx:Label text="百度.gif"/>
	<mx:Image  source="百度.gif"/>
	<mx:Label text="encodeURI('百度.gif')"/>
	<mx:Image source="{encodeURI('百度.gif')}"/>
	<mx:Label text="baidu.gif"/>
	<mx:Image source="baidu.gif"/>
</mx:Application>
Unity加载服务器图片地址到Image上使用
心疼你的一切博客
10-30 1461
有时候会从服务上下载图片,来应用到unity里面，不管从本地还是服务器都可以博客将会介绍Unity加载服务器图片地址到Image上使用。希望这篇博客对Unity的开发者有所帮助。大家好，我是心疼你的一切，不定时更新Unity开发技巧，觉得有用记得一键三连哦。提示：以下是本篇文章正文内容，下面案例可供参考总结一下,希望对你有需要,也刚好对你有用本次总结的就是Unity加载服务器图片以及其他加载网络连接的步骤及使用方法，有需要会继续添加新的。
Unity 从服务器加载AssetBundle资源写入本地内存，并将下载保存的AB资源从本地内存加载至场景
weixin_55532142的博客
06-18 3627
AB资源打包后有一个【目录文件】AssetBundle，他保存了所有AB资源的路径与名称，通过aLLAssetBundleURL链接路径 组拼 从【目录文件】获得的AB资源的名字，从而实现从服务器加载资源的功能。详细见代码。.........
服务器中文名图片上传后 显示不,更换服务器后无法显示上传得图片
weixin_39610353的博客
08-04 171
欢乐服务器后，作数据库校验报错如下：系统设置首页 » 数据库校验技巧提示数据库校验只针对 Discuz! 官方发布的数据库结构为基础进行核对此工具只对字段的修改以及缺少进行简单的检查，不针对索引的缺少进行处理。存在错误字段的数据表 (为了保证论坛的正常运行，请立即修复以下字段)cdb_activities 错误的字段 正确的字段 状态class char(10) NOT NULL default ...
前端图片上传后，服务器不重启,资源无法访问
weixin_45724817的博客
06-15 514
前端图片上传后，服务器不重启,资源无法访问踩坑记录（前端图片上传后，服务器不重启，springsecurity 的静态资源放行失效）解决办法 踩坑记录（前端图片上传后，服务器不重启，springsecurity 的静态资源放行失效） 寻找了很久原因：发现是springboot的静态资源没有更新，因为我上传的图片存放到了resources，又没有编译，在target里面没有找到图片，所以出现了访问错误 解决办法 把运行配置 改成这样的更新类和资源就行了。 ...
img显示服务器本地图片,img显示服务器图片不显示
weixin_31703351的博客
08-10 865
img显示服务器图片不显示 内容精选换一换这是因为该弹性云服务器已被其他用户使用VNC方式登录。VNC方式登录弹性云服务器时，同一时刻仅支持一个用户登录。如果多个用户同时登录，除第一个用户可正常登录外，其他用户登录时只会提示认证成功，但是不显示画面，出现黑屏现象。此时，用户需等待其他用户退出VNC登录后，才能继续登录。在“文章列表”插件中，检查“设置 > 列表数目”的“显示文章条数”和“显示...
SSM项目后台图片名为中文导致前端无法显示图片（编码问题）
weixin_51528263的博客
12-06 927
SSM项目后台图片名为中文导致前端无法显示图片（编码问题）
解决线下能播放FLV，而放在服务器上后不能播放
04-26
标题与描述概述的知识点主要集中在解决FLV视频文件在本地可以正常播放，但在服务器上却无法播放的问题。这一现象通常发生在Windows Server 2003系统下的IIS 6.0服务器环境中，由于该服务器对MIME类型的严格验证机制...
解决vue的 v-for 循环中图片加载路径问题
12-08
先看一下产品需求，如下图所示， 产品要求图片和它的名称一一对应，本来是非常简单的需求，后台直接返回图片路径和名称，前台...数据结构如下：映射关系用对象表示，多个图片，所以放到一个数组中 [ { CnName:'荷
安卓图片三级缓存实现：内存、本地与网络加载Demo
图片三级缓存DEMO从内存网络本地来对数据进行获取.rar”正是围绕这一核心需求设计的一个典型示例，展示了如何通过实现**三级缓存机制**（即内存缓存、本地缓存和网络加载）来高效管理图片资源的获取与展示。...
图片路径中含有中文在jsp下不能正常显示的问题
ldchin的博客
06-13 2517
这里其实涉及到get请求编码和url编码的问题。 一 当路径中存在中文的时候，最简单的解决办法是改变tomcat的编码： WEB进行上传中文文件名的文件时没问题，但下载的时候出现问题，经过一番查找之后原来是TOMCAT默认不支持中文路径和中文文件，如果直接从Apache站点中下载Tomcat，无论是安装版的exe文件，还是 解压缩的ZIP文件，内置的对于get协议中的URL编码都是ISO-8859...
解决在上传中文名图片时显示不了方法
whtsupers的专栏
02-25 557
[size=large]在用struct2在做上传图片的时候，如果引用的是中文名的图片时，在JSP页面上显示不了图片，而英文名图片又可以。 解决方法：修改tomcat底下的server文件 ： 加上[color=red]URIEncoding="UTF-8"[/color]就可以正常显示图片了。 [/size]...
中文图片不能加载的处理解决方案
shi860715的博客
04-22 558
中文图片名不能加载的处理解决方案 在实际部署中，我们经常遇到图片不能正常加载的问题；经过层层问题定位，问题定位也就是中文编码问题。 1：中文编码过滤器 1.1 自定义滤器 public class CharactorFilter implements Filter { //继承Filter类 //字符编码 String encoding=null; public void...
图片上传到服务器中，图片名字含有中文处理办法
超超超超哥的博客
04-19 3278
需要将tomcat中的server.xml添加编码                connectionTimeout="20000"                redirectPort="8443" URIEncoding="utf-8"/>
含有中文名称的图片资源无法访问
caixiajia的专栏
02-12 1348
问题 描述：含有中文的图像在访问时变成了如下链接 http://.../%E4%BA%8E%E7%BB%B4%E7%A7%80_94CE7FE3-51EF-4F38-85CE-E114083F8D4C.DCM 原因：没有在tomcat配置URIEncoding。 解决方法：
vue针对引入本地图片，本地可以显示，部署到服务器上无法显示问题
MASK_life的博客
08-06 3187
项目场景： 利用百度图片打点定位，自定义点的时候，用本地图片来代替定位点 问题描述： 使用相对路径和绝对路径来引入本地图片的时候，项目在本地启动图片可以正常显示，但是部署到服务器上的时候，显示无法找到该图片。 解决方案： 利用require来引入图片。定义一个变量接收，再将该变量赋值绑定。最终成功解决问题。 ...
关于 图片在线上环境不显示问题
Beth__hui的博客
11-16 1021
遇到的一个bug 是图片， 放在assets 目录下，js中 通过 相对路径引用。 本地可以正常显示，但是线上就无法显示。打包路径显示打进了 static 中。 最后发现是wenpack 的限制。
本地可以正常运行，但是打完包部署在服务器上通过域名访问就不显示数据报上面的错
最新发布
01-05
<think>我们遇到的问题是：本地运行正常，但打包部署到服务器通过域名访问时不显示数据，且报错 'Uncaught (in promise) ReferenceError: SjbsGgsjsbglApi is not defined'。 根据错误信息，问题在于 `SjbsGgsjsbglApi` 这个变量在运行时未定义。结合之前提供的引用内容，我们可以从以下几个方面分析： ### 1. **检查变量定义和引入方式** - **全局变量问题**：如果 `SjbsGgsjsbglApi` 是通过全局方式引入（例如，通过 `<script>` 标签引入的库），那么在打包部署后，可能因为路径问题、缓存问题或域名限制导致该脚本没有正确加载。 - **模块引入问题**：如果 `SjbsGgsjsbglApi` 是通过模块方式引入（如 ES6 的 `import`），则需要确保在构建过程中该模块被正确打包，并且在运行时能够找到。 ### 2. **区分开发环境和生产环境** - 在开发环境中，我们通常使用开发服务器（如 Vite 的开发服务器），而在生产环境是静态文件服务。可能存在环境变量使用不当的情况（参考引用[2]中关于 `process` 未定义的问题）。 - 例如，在代码中可能使用了类似 `process.env` 的环境变量，但在生产环境中没有正确配置。 ### 3. **路径问题** - 打包后，资源的路径可能发生变化。如果 `SjbsGgsjsbglApi` 是通过相对路径引入的，需要确保部署后的路径正确。 ### 4. **异步加载问题** - 如果 `SjbsGgsjsbglApi` 是通过异步加载的脚本（例如动态 `import()` 或者通过插入 `script` 标签），则需要确保在脚本加载完成后再使用它，否则会出现未定义的错误。 ### 5. **跨域问题** - 部署到服务器后，如果 `SjbsGgsjsbglApi` 的脚本是从另一个域名加载的，可能会因为跨域问题导致脚本加载失败。 ## 解决方案 ### 1. **检查全局变量的引入** - 如果 `SjbsGgsjsbglApi` 是一个全局变量，需要在 `index.html` 中通过 `<script>` 标签引入。请确保该脚本的路径在部署后是正确的，并且该脚本在调用之前已经加载。 - 在 `index.html` 中，可以这样引入： ```html <script src="https://example.com/path/to/SjbsGgsjsbglApi.js"></script> ``` 或者使用相对路径（注意部署后的基础路径）： ```html <script src="/static/js/SjbsGgsjsbglApi.js"></script> ``` - 如果使用了 Vite，可以在 `public` 目录下放置该脚本，然后在 `index.html` 中引用。例如，将脚本放在 `public/js` 目录下，然后使用： ```html <script src="/js/SjbsGgsjsbglApi.js"></script> ``` ### 2. **使用模块化引入** - 如果可能，建议将 `SjbsGgsjsbglApi` 作为模块引入，这样可以在构建时被正确处理。 - 例如，在代码中： ```javascript import SjbsGgsjsbglApi from 'SjbsGgsjsbglApi'; ``` - 如果该库不支持模块化，可以考虑将其包装成一个模块，或者寻找支持模块化的版本。 ### 3. **确保在脚本加载完成后使用** - 如果是通过动态加载脚本的方式，需要确保在脚本加载完成后再调用相关方法。可以使用 `onload` 事件： ```javascript function loadScript(src, callback) { const script = document.createElement('script'); script.src = src; script.onload = callback; document.head.appendChild(script); } loadScript('path/to/SjbsGgsjsbglApi.js', () => { // 此时可以安全使用 SjbsGgsjsbglApi SjbsGgsjsbglApi.doSomething(); }); ``` ### 4. **检查环境变量** - 如果代码中有使用环境变量（如 `process.env`），需要确保在构建时已经设置了生产环境的环境变量。在 Vite 中，可以使用 `.env` 文件来设置环境变量（参考引用[2]）。 - 在 Vite 中，生产环境的环境变量需要以 `VITE_` 为前缀，然后在代码中通过 `import.meta.env.VITE_XXX` 访问。 ### 5. **检查构建配置** - 在 Vite 的配置文件 `vite.config.js` 中，确保设置了正确的 `base` 选项（部署的基础路径）。例如，如果部署在域名的子路径下，需要设置： ```javascript export default { base: '/your-sub-path/', // ...其他配置 } ``` - 同时，检查是否有配置导致某些资源没有被正确打包（比如通过 `externals` 排除的依赖，但在生产环境中没有引入）。 ### 6. **查看网络请求** - 在部署后的页面中，打开开发者工具，查看网络请求，确认 `SjbsGgsjsbglApi.js` 是否被正确加载。如果没有，检查路径是否正确，以及服务器是否能够正确返回该文件。 ### 7. **跨域问题** - 如果 `SjbsGgsjsbglApi.js` 是从不同源加载的，确保服务器设置了正确的 CORS 响应头。例如： ``` Access-Control-Allow-Origin: * ``` ### 8. **使用打包分析工具** - 使用打包分析工具（如 `rollup-plugin-visualizer`）查看构建结果，确认 `SjbsGgsjsbglApi` 是否被打包。 ## 总结步骤 1. 确认 `SjbsGgsjsbglApi` 是如何引入的（全局脚本还是模块）。 2. 检查生产环境的资源路径是否正确。 3. 确保脚本加载顺序，在使用之前已经加载完成。 4. 检查环境变量和构建配置（特别是 Vite 的 `base` 配置）。 5. 通过开发者工具查看网络请求，确认脚本是否加载成功。 通过以上步骤，应该能够定位并解决该问题。 §§相关问题§§ 1. 如何解决 Vite 打包后静态资源路径错误的问题？ 2. 在 Vite 中如何正确配置环境变量？ 3. 如何确保在引入第三方全局库时避免命名冲突？ </think> 针对本地运行正常，但打包部署后出现 `Uncaught (in promise) ReferenceError: SjbsGgsjsbglApi is not defined` 错误的问题，以下是系统化的解决方案： ### 1. **检查全局变量引入方式（最常见原因）** 问题核心是 `SjbsGgsjsbglApi` 未定义，通常发生在两种场景： ```javascript // ❌ 错误方式：在模块化环境中（如Vite）直接使用全局变量 window.SjbsGgsjsbglApi.doSomething() // 打包后可能丢失 // ✅ 正确方式：通过ES模块导入 import SjbsGgsjsbglApi from 'sjbs-ggsjsbgl-api' ``` **解决方案：** 1. 在代码中替换全局变量为模块导入 2. 在 `index.html` 中通过 `<script>` 标签显式引入（仅限UMD/CDN方式） ```html <!-- 在public/index.html中添加 --> <script src="https://cdn.example.com/sjbs-ggsjsbgl-api.min.js"></script> ``` ### 2. **配置Vite构建选项（针对Vite项目）** 在 `vite.config.js` 中增加全局变量支持： ```javascript // vite.config.js export default { build: { rollupOptions: { external: ['SjbsGgsjsbglApi'], // 防止打包工具处理该库 output: { globals: { SjbsGgsjsbglApi: 'SjbsGgsjsbglApi' // 声明全局变量名 } } } } } ``` ### 3. **处理环境差异（开发/生产环境）** 本地开发可能自动注入全局变量，但生产环境需要显式声明： ```javascript // src/main.js if (import.meta.env.PROD) { window.SjbsGgsjsbglApi = SjbsGgsjsbglApi // 手动挂载到window } ``` ### 4. **检查资源加载路径** 部署后路径变化导致脚本加载失败： ```javascript // 使用Vite的import.meta.url确保正确路径 const apiUrl = new URL('./libs/SjbsGgsjsbglApi.js', import.meta.url).href // 动态加载脚本 const loadScript = async () => { await import(apiUrl) // 动态导入 SjbsGgsjsbglApi.init() // 此时已可用 } ``` ### 5. **调试与验证步骤** 1. **检查网络请求**：在DevTools的Network面板确认 `SjbsGgsjsbglApi.js` 是否成功加载 2. **输出环境变量**：`console.log(import.meta.env)` 验证环境配置 3. **源码对比**：使用 `diff` 工具比较本地和部署后的代码差异 ### 6. **备选方案：封装为安全引用** ```javascript // utils/api-safe.js export const getApi = () => { if (typeof SjbsGgsjsbglApi !== 'undefined') { return SjbsGgsjsbglApi } // 动态加载兜底 return import('sjbs-ggsjsbgl-api').then(module => module.default) } // 使用示例 getApi().then(api => api.doSomething()) ``` > **关键点**：该错误通常源于开发/生产环境差异，90%的案例通过 **模块化导入替代全局变量** 解决[^1][^2]。Vite等现代构建工具要求严格遵循ES模块规范[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值