Question

尝试使用带有图像和超链接的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)

Answer 1

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

请为图像src添加正确的绝对路径或相对路径。
从开发者控制台添加后，尝试在其他选项卡中打开该图像
第三点，但重要的一点是检查您对图像及其文件夹的文件权限，如果不是755，请进行更改。

我认为这可能对您有用。

Answer 2

如果您的html文件夹和img文件夹位置不同，则将提供完整的pc位置。
假设您的图片位置在d：驱动器的images文件夹中，并且您的html在桌面或pc的任何位置：
这里我在桌面图像文件夹中有图像。然后img标签应如下所示。

<img src=”D:/images/sun.jpg” alt=”Sun”></img>

图片无法在网页上呈现

2 个答案: