图片地址中有空格，用做背景图时无法展示

原创已于 2023-12-26 11:37:12 修改 · 652 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-12-26 11:36:26 首次发布

本文介绍了如何处理HTML中图片地址带有空格的问题，通过JavaScript的replace方法将空格替换为%20，确保URL可被正确解析，无论地址中原本是否有空格，从而让背景图片正常显示。

部署运行你感兴趣的模型镜像

看这个链接

图片路径中有空格，无法作为背景图片使用

如果是url取图片的地址,如果图片中带有空格是读不到图片的,需要把地址中的空格改为%20.
如果使用的是地址中有无空格都不会有影响
如果你是第一种情况,那么可以使用如下方法解决.
例如imgsrc是你的带有空格的图片地址.
imgsrc = imgsrc.replace(/\s/g,encodeURICompent(’ ‘));
或者
imgsrc = imgsrc.replace(/\s/g,’%20’);
这时你的imgsrc即是没有空格的地址,空格地方替换为%20,url可以取到图片的地址

您可能感兴趣的与本文相关的镜像

ACE-Step

音乐合成

ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Conan_LU7

关注关注

10
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

nginx配置访问图片路径以及html静态页面的调取方法

01-11

给大家讲一个快速配置nginx访问图片地址，以及访问html静态页面的配置。 1.实验环境首先随便某个路径下创建相应的目录。如图下 2.在里面放自定义的html或者图片。 3.nginx配置 user root; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } ht

解决HTML中图片加载问题，处理带有空格和特殊字符的img src地址

SailingCoder的博客

12-18

2336

在开发中，经常会遇到HTML中图片加载失败或JavaScript中new Image的src地址加载异常的情况。这往往是由于URL中包含空格或其他特殊字符而引起的问题。

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

优快云-Ada助手 2023.12.29
恭喜博主持续创作，第13篇博客内容很有启发性。对于图片地址中有空格无法展示的问题，我建议可以尝试使用编码转换或者更换图片存储路径的方式来解决。期待你的下一篇作品，继续加油！

解决图片路径中含有空格，无法在background-image中正常显示的问题

大桶爆米花eee

12-22

4522

解决图片名称中含有空格，无法在background-image中正常显示的问题在需求中通过后台传递的值动态渲染页面的某个div中的背景图片时，发现当有图片的路径中含有空格时，无法正常渲染。解决办法：把空格转义，然后设置给 backgroundImage 就没问题了 var img = img.replace(/\s/g, encodeURIComponent(' ')) $(".upload...

html中css图片链接地址中有（）括号不显示的解决办法

不会java的java程序员

10-28

1177

css中的background-image中图片链接地址出现括号无法显示图片的解决办法

图片路径有 # 导致图片显示不出

weixin_54252683的博客

10-09

968

在请求的url地址中直接使用一些特殊字符，在服务器端接收的时候经常出现特殊字符后面数据缺失，需要使用encodeURIComponent，这样的url才不会被#等特殊字符截断。常用的方法： escape 方法返回一个包含了 charstring 内容的字符串值（Unicode 格式）所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替，但是escape 方法不能够用来对统一资源标示码 (URI) 进行编码。对其编码应使用 encodeURI 和encodeURICompone

紫色城市主题PPT背景图片精选

- 在PPT中应用背景图片时，可以通过“设计”选项卡下的“背景”功能区来设置幻灯片背景。 - 可以选择纯色、渐变色、图片或者纹理作为PPT的背景。 - 使用背景图片时需要注意版权问题，确保图片的使用不会侵犯他人...

精选唯美星球PPT背景图片下载

2. 幻灯片背景图片：幻灯片背景图片是用于演示文稿（如PPT）中，作为展示内容的视觉基础。它为演示文稿的视觉风格和主题设定了基调，对于传达信息和吸引观众注意力有重要作用。背景图片需要根据演示文稿的主题和内容...

韩范小清新花卉PPT背景图片系列

通常在命名文件时应避免使用特殊字符和空格，以确保不同操作系统和平台的兼容性。 9. PPT设计的最佳实践： PPT设计时应遵循一些最佳实践，例如：保持整体风格一致性，合理利用空白，选择易读的字体和颜色，适当使用...

高清晰发达城市建筑PPT背景图片下载

- 描述中提到的PPT背景图片指的是在制作演示文稿（PPT）时所使用的背景图片，这通常需要符合演示内容的主题和风格。在这个案例中，背景图片是以发达城市建筑为主题，这样的背景能够给演示内容带来专业和现代的感觉...

紫色星爆PPT背景图片下载，抽象幻灯片背景

- 避免使用特殊字符和空格，以免在不同的操作系统或平台间传输时出现兼容性问题。在本例中，文件名称“图片15.jpg”虽然简洁，但缺乏具体信息，不易于长期管理和检索。建议在命名时加入具体描述，如“紫色炫酷星...

nginx 配置图片服务器技巧

热门推荐

netingcn

06-27

1万+

应用场景: uploads目录是用来存放上传到服务器的图片文件的根目录，在根目录下可能存在分类的文件夹，在这些文件夹中存放原始图片例如src.jpg, 同时可能存在该图片的对应的小图s_src.jpg。假设uploads下的busipic文件夹下有a.jpg,s_a.jpg,b.jpg,default.jpg，servername为www.exam.com 如果访问www.exam.com/uploads/busipic/s_a.jpg返回www.exam.com/uploads/busipic/s

解决图片底部有空白间隙的问题

sinat_38944746的博客

11-12

1193

解决图片底部有空白间隙的问题

解决上传文件时文件名有空格的几种方法

Never_owned的博客

01-07

2075

在上传文件的时候，有时候会发现一些文件名当中存在空格，导致上传失败，那么该怎么处理这些空格呢？如果我们每个文件去修改的话，那样会花费很多时间，那么今天小编给大家分享一个新的技巧，下面一起来试试。需要哪些工具？文件批量改名高手多个文件怎么快速处理？运行文件批量改名高手，单击上方的这个“添加文件”或者“添加文件夹”，小编选择是前者弹出对话框，选中这些文件（可以是图片、视频、文档、音频等等），并点打开，即可导入表格中确定导入完成，在“命名方式”中，选择“替换”，将查找内容选择为“文本”，输入空格

WPS目录导航中间有空行

huzhouz_hou的博客

05-18

2073

如果你点击“图片”，“4.3 程序设计”，“如图4.3所示”会发现三者是三种不同格式，图片属于目录中的空白格式。所以解决办法是让图片归属于上一正文格式这样就不会出现空格。可以看到空格消失，接下来插入图片接受调整格式选项在图片后按回车添加标题完成。

解决路径名中不能有空格的问题

weixin_34272308的博客

05-09

3058

这几天做一个通讯程序，要通过“运行”开启一个进程结果有时候可以正常调用，有时候就出现问题出问题代码如下： Process p=Process.Start(t_path.Text.ToString(),t_file.Text.ToString()); Process.start()第一个参数是运行的程序名称，后面是该程序参数如果这两个路径中不含空格的时候就可以正常运行，如果包含像"...

nginx 常用配置

evan_yyz的专栏

10-28

513

user nginx; worker_processes 1; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/ngin

css前端背景图片不显示，background-image无效，路径正确但背景图片不显示问题