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

推荐阅读
  • selenium通过JS语法操作页面元素
    做过web测试的小伙伴们都知道,web元素现在很多是JS写的,那么既然是JS写的,可以通过JS语言去操作页面,来帮助我们操作一些selenium不能覆盖的功能。问题来了我们能否通过 ... [详细]
  • 本文由公众号【数智物语】(ID: decision_engine)发布,关注获取更多干货。文章探讨了从数据收集到清洗、建模及可视化的全过程,介绍了41款实用工具,旨在帮助数据科学家和分析师提升工作效率。 ... [详细]
  • 本文介绍了如何通过安装和配置php_uploadprogress扩展来实现文件上传时的进度条显示功能。通过一个简单的示例,详细解释了从安装扩展到编写具体代码的全过程。 ... [详细]
  • 如何高效学习鸿蒙操作系统:开发者指南
    本文探讨了开发者如何更有效地学习鸿蒙操作系统,提供了来自行业专家的建议,包括系统化学习方法、职业规划建议以及具体的开发技巧。 ... [详细]
  • 本文探讨了如何使用Scrapy框架构建高效的数据采集系统,以及如何通过异步处理技术提升数据存储的效率。同时,文章还介绍了针对不同网站采用的不同采集策略。 ... [详细]
  • Python网络编程:深入探讨TCP粘包问题及解决方案
    本文详细探讨了TCP协议下的粘包现象及其产生的原因,并提供了通过自定义报头解决粘包问题的具体实现方案。同时,对比了TCP与UDP协议在数据传输上的不同特性。 ... [详细]
  • 在CentOS 7中部署Nginx并配置SSL证书
    本文详细介绍了如何在CentOS 7操作系统上安装Nginx服务器,并配置SSL证书以增强网站的安全性。适合初学者和中级用户参考。 ... [详细]
  • 通过命令行执行Robot Framework测试用例的方法
    本文介绍如何利用命令行工具来运行Robot Framework中的测试文件及用例,解决常见的模块未找到错误。 ... [详细]
  • 页面预渲染适用于主要包含静态内容的页面。对于依赖大量API调用的动态页面,建议采用SSR(服务器端渲染),如Nuxt等框架。更多优化策略可参见:https://github.com/HaoChuan9421/vue-cli3-optimization ... [详细]
  • 本文详细探讨了在Windows 98环境下安装Apache 1.3.9、JServ、GNUJSP 1.0、JDK 1.2.2及JSDK 2.0后遇到的中文显示问题,并提供了多种有效的解决方案。 ... [详细]
  • Python环境下OpenCV的安装与验证方法
    本文介绍了如何在Python环境中安装OpenCV库及其额外模块,并提供了验证安装是否成功的具体步骤和代码示例。 ... [详细]
  • Java中提取字符串的最后一部分
    本文介绍了如何使用Java中的substring()和split()方法来提取字符串的最后一部分,特别是在处理包含特殊字符的路径时的方法与技巧。 ... [详细]
  • 本文介绍了用户界面(User Interface, UI)的基本概念,以及在iOS应用程序中UIView及其子类的重要性和使用方式。文章详细探讨了UIView如何作为用户交互的核心组件,以及它与其他UI控件和业务逻辑的关系。 ... [详细]
  • 实现Win10与Linux服务器的SSH无密码登录
    本文介绍了如何在Windows 10环境下使用Git工具,通过配置SSH密钥对,实现与Linux服务器的无密码登录。主要步骤包括生成本地公钥、上传至服务器以及配置服务器端的信任关系。 ... [详细]
  • Gradle 是 Android Studio 中默认的构建工具,了解其基本配置对于开发效率的提升至关重要。本文将详细介绍如何在 Gradle 中定义和使用共享变量,以确保项目的一致性和可维护性。 ... [详细]
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社区 版权所有