为什么没有任何图像在带有 img 标签的 HTML 中工作？答案

【问题标题】：Why don't any images work in HTML with the img tag?为什么没有任何图像在带有 img 标签的 HTML 中工作？
【发布时间】：2022-12-04 02:02:55
【问题描述】：

对于 HTML 代码的几个不同部分，我尝试包含图像和图形，图像和图形都在 VS 代码中与它们所引用的 HTML 页面相同的文件夹中，但它们显示为损坏的图像，并且404 未找到错误（图表是一个 html 文件）

我将这段代码用于 PNG 文件，我尝试了显式文件路径和相对文件路径的每种组合，只是 bastian.png，但它们都会导致图像损坏。

<footer class="mb-5 small text-center text-muted">
            Data provided by <a href="https://www.bastiansolutions.com/"></a>
            <img src="final_project/templates/bastian.png" alt="Bastian Solutions logo">


        </footer>

对于 HTML 文件，我尝试了相同的不同文件路径但没有结果，这是代码：

{% extends "layout.html" %}

{% block title %}
    Capacity Chart
{% endblock %}

{% block main %}
    <h1>Quoted</h1>
    <h3>Width: {{ width }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Length: {{ length }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Type: {{ type }}</h3>
    <div>
        <iframe src="final_project/templates/test_graph.html" height="800" width="1200" frameBorder="0"></iframe>
    </div>
{% endblock %}

【问题讨论】：

你是说 img 与 html 页面在同一个文件夹中，如果是这样，“final_project/templates/bastian.png”应该是“bastian.png”，不是吗？

标签： html image png

【解决方案1】：

您尝试在 HTML 代码中显示的图像无法正常工作有几个潜在原因。以下是您可以尝试解决问题的一些方法：

检查图像的文件路径以确保它是正确的。如果您使用的是相对文件路径，请确保它是相对于试图显示图像的 HTML 文件的位置。
确保您尝试显示的图像实际存在于文件路径指定的位置。如果该文件不存在或不在正确的位置，则 img 标签将无法显示它。
如果您使用 img 标签显示 PNG 文件，请确保该文件具有 .png 扩展名。如果文件没有正确的扩展名，img 标签将无法显示它。
如果您使用 iframe 标记显示 HTML 文件，请确保该文件具有 .html 扩展名。如果文件没有正确的扩展名，iframe 标签将无法显示它。
如果您仍然遇到问题，请尝试使用图像的完整绝对文件路径而不是相对文件路径。这有助于确保 img 或 iframe 标签能够找到正确的文件。

我希望这有帮助！

【讨论】：