信息发布→ 登录 注册 退出

如何在HTML中正确引用本地图片资源

发布时间:2026-01-12

点击量:

当html中图片无法显示且服务器返回404错误时,通常是因为图片路径未被web框架正确识别——关键在于静态资源(如.jpg)必须放在web框架指定的静态文件目录中,并通过正确的相对或绝对路径引用。

在Django、Flask等主流Python Web框架中,浏览器无法直接访问项目任意目录下的文件。即使你在Python脚本中能用open()成功读取öppettider.jpg,也不代表该文件可通过HTTP请求(如/öppettider.jpg)被访问。终端日志 "GET /öppettider.jpg HTTP/1.1" 404 明确表明:浏览器尝试向根路径请求该图片,但Web服务器未配置该路由或未将其视为静态资源。

✅ 正确做法(以常见框架为例):

  • Django
    将图片放入 static/ 子目录(如 myapp/static/images/öppettider.jpg),并在HTML中使用 {% static %} 模板标签:

    {% load static %}
    @@##@@

    并确保 settings.py 中已配置:

    STATIC_URL = '/static/'
    STATICFILES_DIRS = [BASE_DIR / "static"]
  • Flask
    默认将 static/ 目录作为静态资源根目录。把图片放在 static/öppettider.jpg,然后使用相对路径(注意:不是 ./öppettider.jpg,而是 /static/öppettider.jpg 或更推荐的 url_for):

    @@##@@

⚠️ 注意事项:

  • ❌ 避免使用 src="öppettider.jpg"(无前缀)——这会让浏览器请求 http://localhost:8000/öppettider.jpg,而该路径未被映射到文件系统;
  • ❌ 避免 src="./öppettider.jpg"——这是相对于当前HTML页面URL的路径,极易因路由嵌套出错;
  • ✅ 始终通过框架提供的静态资源机制({% static %} 或 url_for('static', ...))生成路径,确保可移植性和安全性;
  • ? 文件名含非ASCII字符(如 ö)一般可被支持,但建议重命名为 oppettider.jpg 并更新引用,避免潜在编码问题(尤其在旧版服务器或Windows环境下)。

总结:图片不显示的根本原因不是“路径写错”,而是未遵循Web框架的静态资源约定。将图片归入static/目录,并用框架推荐的方式引用,即可彻底解决404问题。

标签:# python  # html  # go  # windows  # 编码  # 浏览器  # app  # 路由  # win  # django  # python脚本  
在线客服
服务热线

服务热线

4008888355

微信咨询
二维码
返回顶部
×二维码

截屏,微信识别二维码

打开微信

微信号已复制,请打开微信添加咨询详情!