时间戳

首页 > 解决方案 > 图片无法在网页上呈现

html - 图片无法在网页上呈现

问题描述

在 HTML 中尝试一个带有图像和超链接的简单表格。图像与 HTML 和 CSS 文件的源代码位于不同的文件夹中。

尝试 Mozilla MDN 参考来验证我的图像源语法。

语法有什么问题？从不同文件夹导入图像时我应该有所作为吗？

bhddua_mudra.html 文件：

<!DOCTYPE html>

<head>
  <title>Buddha Mudra</title>
</head>

<body>

  <table border=1>
    <thead>
      <th>Image</th>
      <th>Name</th>
      <th>Reference</th>
    </thead>

    <tbody>
      <tr>
        <td>
          <img class="fit-picture" src="/Users/kuldeep/PycharmProjects/HTML/src/img/abhayamudra.JPG" alt="Abhayam Mudra" />
        </td>
        <td>Abhayam Mudra</td>
        <td><a href="https://www.wikiwand.com/en/Abhayamudra"> Abhayam Mudra</a></td>
      </tr>

      <tr>
        <td>
          <img class="fit-picture" src="/Users/kuldeep/PycharmProjects/HTML/src/img/bhumisparsa.JPG" alt="Bhumisparsa Mudra" />
        </td>
        <td>Bhumisparsa Mudra</td>
        <td><a href="https://www.wikiwand.com/en/Mudra"> Bhumisparsa Mudra</a></td>
      </tr>

      <tr>
        <td>
          <img class="fit-picture" src="/Users/kuldeep/PycharmProjects/HTML/src/img/dharmachakra.JPG" alt="Dharmachakra Mudra" />
        </td>
        <td>Dharmachakra Mudra</td>
        <td><a href="https://www.wikiwand.com/en/Mudra"> Abhayam Mudra</a></td>
      </tr>

      <tr>
        <td>
          <img class="fit-picture" src="/Users/kuldeep/PycharmProjects/HTML/src/img/dhyanmudra.JPG" alt="Dhyan Mudra" />
        </td>
        <td>Dhyan Mudra</td>
        <td><a href="https://www.wikiwand.com/en/Mudra"> Dhyan Mudra</a></td>
      </tr>

      <tr>
        <td>
          <img class="fit-picture" src="/Users/kuldeep/PycharmProjects/HTML/src/img/karanmudra.JPG" alt="Karan Mudra" />
        </td>
        <td>Karan Mudra</td>
        <td><a href="https://www.wikiwand.com/en/Abhayamudra/Mudra">Karan Mudra</a></td>
      </tr>

      <tr>
        <td>
          <img class="fit-picture" src="/Users/kuldeep/PycharmProjects/HTML/src/img/veradamudra.JPG" alt="Verada Mudra" />
        </td>
        <td>Verada Mudra</td>
        <td><a href="https://www.wikiwand.com/en/Abhayamudra/Mudra">Verada Mudra</a></td>
      </tr>

      <tr>
        <td>
          <img class="fit-picture" src="/Users/kuldeep/PycharmProjects/HTML/src/img/vitarkamudra.JPG" alt="Vitarka Mudra" />
        </td>
        <td>Vitarka Mudra</td>
        <td><a href="https://www.wikiwand.com/en/Abhayamudra/Mudra">Vitarka Mudra</a></td>
      </tr>
    </tbody>
  </table>
</body>

目录结构

HTML
  -dist
        -img
        (all images here)

  -mozilla 
    (HTML and CSS here)

标签： html

解决方案

请检查以下提到的几点，我认为这可能会解决您的问题。

  1. 请为您的图像 src 添加正确的绝对或相对路径。

  2. 从开发者控制台添加后，尝试在不同的选项卡中打开该图像

  3. 第三点但重要的一点是检查您对图像及其文件夹的文件权限，如果不是 755，请更改它。

我认为这可能对你有用。

推荐阅读