热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

关于HTML页面无法连接到静态图像资源的原因和解决办法

起因:某想着把虚拟试穿算法实现的功能整成一个网页版,后台服务+前端显示。服务写好后,网页界面显示静态图像始终报错:找不到,显示如下:下面显示正常的是因为,img标签的src网络资源

起因:某想着把虚拟试穿算法实现的功能整成一个网页版,后台服务+前端显示。服务写好后,网页界面显示静态图像始终报错:找不到,显示如下:
《关于HTML页面无法连接到静态图像资源的原因和解决办法》
下面显示正常的是因为,img标签的src=网络资源,正常。
上面两个显示找不到资源的,是src=本地静态资源,显示的是标语,没找不到图。
检查,Network获取资源显示404.
《关于HTML页面无法连接到静态图像资源的原因和解决办法》
进一步查找原因:
《关于HTML页面无法连接到静态图像资源的原因和解决办法》
原因分析:在页面上显示一张本地的图片。看似简单的需求,却并不简单。
某记得某学html的时候,怎么就显示成功了?
学的时候,没注意写的都是静态页面,是直接在本地机器上写一个静态的HTML文件,img标签的src指向本地就会成功。
但是,如果你像我一样,走了后端的请求,还用了模板引擎,这样写就不会成功了。(请求会变成http://127.0.0.1:8000/thy.jpg,这种请求显然是访问不到的)并不是在当前文件夹下去找,是一个网址下面去找.。

解决办法 1–Java版
把本地资源变成可以访问的资源:
1.比如:_New_作者提到的方法。他是Java布置网络后台.

解决办法2–python版,Django后台框架
2.我是用python写后台服务,用的是Django框架布置的后台服务。

  1. 需要配置setting.py文件。查找文件,配置静态资源。setting.py文件里配置如下代码:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
('css', os.path.join(STATIC_ROOT, 'css').replace('\\', '/')),
('js', os.path.join(STATIC_ROOT, 'js').replace('\\', '/')),
('images', os.path.join(STATIC_ROOT, 'images').replace('\\', '/')),
('upload', os.path.join(STATIC_ROOT, 'upload').replace('\\', '/')),
)

  1. 在url.py文件里,导入:from django.contrib.staticfiles.urls import staticfiles_urlpatterns
    末尾加一行:urlpatterns += staticfiles_urlpatterns()
    使先前的配置有效。
  2. 然后剩下的就和普通的静态页面一样了。需要注意的是在html文件里引入该图片需要写成这样:,因为,配置的时候是'/static/'
    over,重启服务,就正常了
    《关于HTML页面无法连接到静态图像资源的原因和解决办法》
    最后,如果你是别的问题,也祝您找到错误线索和解决办法!

推荐阅读
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • 本文详细分析了JSP(JavaServer Pages)技术的主要优点和缺点,帮助开发者更好地理解其适用场景及潜在挑战。JSP作为一种服务器端技术,广泛应用于Web开发中。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 深入解析JVM垃圾收集器
    本文基于《深入理解Java虚拟机:JVM高级特性与最佳实践》第二版,详细探讨了JVM中不同类型的垃圾收集器及其工作原理。通过介绍各种垃圾收集器的特性和应用场景,帮助读者更好地理解和优化JVM内存管理。 ... [详细]
  • 使用Numpy实现无外部库依赖的双线性插值图像缩放
    本文介绍如何仅使用Numpy库,通过双线性插值方法实现图像的高效缩放,避免了对OpenCV等图像处理库的依赖。文中详细解释了算法原理,并提供了完整的代码示例。 ... [详细]
  • 深入理解OAuth认证机制
    本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准,旨在为第三方应用提供安全的用户资源访问授权,同时确保用户的账户信息(如用户名和密码)不会暴露给第三方。 ... [详细]
  • 本文详细介绍了Java中org.neo4j.helpers.collection.Iterators.single()方法的功能、使用场景及代码示例,帮助开发者更好地理解和应用该方法。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • 本文将介绍如何使用 Go 语言编写和运行一个简单的“Hello, World!”程序。内容涵盖开发环境配置、代码结构解析及执行步骤。 ... [详细]
  • Java 中的 BigDecimal pow()方法,示例 ... [详细]
  • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
author-avatar
银仔-zxy
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有