热门标签 | 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页面无法连接到静态图像资源的原因和解决办法》
    最后,如果你是别的问题,也祝您找到错误线索和解决办法!

推荐阅读
  • 深入理解OAuth认证机制
    本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准,旨在为第三方应用提供安全的用户资源访问授权,同时确保用户的账户信息(如用户名和密码)不会暴露给第三方。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 深入理解 Oracle 存储函数:计算员工年收入
    本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程,并提供完整的代码示例。 ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 本文介绍了Java并发库中的阻塞队列(BlockingQueue)及其典型应用场景。通过具体实例,展示了如何利用LinkedBlockingQueue实现线程间高效、安全的数据传递,并结合线程池和原子类优化性能。 ... [详细]
  • 2023年京东Android面试真题解析与经验分享
    本文由一位拥有6年Android开发经验的工程师撰写,详细解析了京东面试中常见的技术问题。涵盖引用传递、Handler机制、ListView优化、多线程控制及ANR处理等核心知识点。 ... [详细]
  • 从零开始构建完整手机站:Vue CLI 3 实战指南(第一部分)
    本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点,并确保这些内容与实际工作中的需求紧密结合。 ... [详细]
  • 帝国CMS多图上传插件详解及使用指南
    本文介绍了一款用于帝国CMS的多图上传插件,该插件通过Flash技术实现批量图片上传功能,显著提升了多图上传效率。文章详细说明了插件的安装、配置和使用方法。 ... [详细]
  • 本文探讨了如何通过最小生成树(MST)来计算严格次小生成树。在处理过程中,需特别注意所有边权重相等的情况,以避免错误。我们首先构建最小生成树,然后枚举每条非树边,检查其是否能形成更优的次小生成树。 ... [详细]
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • Python自动化处理:从Word文档提取内容并生成带水印的PDF
    本文介绍如何利用Python实现从特定网站下载Word文档,去除水印并添加自定义水印,最终将文档转换为PDF格式。该方法适用于批量处理和自动化需求。 ... [详细]
  • 本文探讨了卷积神经网络(CNN)中感受野的概念及其与锚框(anchor box)的关系。感受野定义了特征图上每个像素点对应的输入图像区域大小,而锚框则是在每个像素中心生成的多个不同尺寸和宽高比的边界框。两者在目标检测任务中起到关键作用。 ... [详细]
  • 如何高效创建和使用字体图标
    在Web和移动开发中,为什么选择字体图标?主要原因是其卓越的性能,可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程,并提供了专业建议。 ... [详细]
  • 本文探讨了如何在给定整数N的情况下,找到两个不同的整数a和b,使得它们的和最大,并且满足特定的数学条件。 ... [详细]
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社区 版权所有