如何在托管在 heroku 上的 html 文件中显示图像?



大家好。

总结一下,我正在尝试为我的heroku应用程序创建一个网页,但是当我尝试在上面添加图像时,它们不会打印。到目前为止,我的文件是这样组织的:

主文件

  • index.js
    • adding.html
    • pic.png

当然名称不完全是这些,但是你明白了

我在我的html文件中调用它们的方式是:
<!DOCTYPE html>
<html>
<head>
<title>
Hub2Boond - Ajout d'utilisateur
</title>

<!-- templates -->
<style>
.bgQueriadis {
background-color: rgb(129,192,240);
width: 400px;
position: absolute;
top: 150px;
left: 40%;
width: 450px;
bottom:50px;
}
</style>
<style>
.logoQueriadis {
background-color: rgb(54,80,100);
width: 400px;
position: absolute;
bottom: 0%;
left: 0%;
width: 100%;
height: 50px;
}
</style>
<style>
.logoAPI {
background-color: rgb(54,80,100);
width: 400px;
position: absolute;
top: 0%;
left:0%;
width: 100%;
height: 150px;
}
</style>

</head>
<body>
<div class="logoAPI">
<p><br>&nbsp &nbsp &nbsp
<img src="./HubSpot_LogoWBG.png" alt="Logo Hubspot" height="76px" style="margin: auto;">
<img src="https://cdn-icons-png.flaticon.com/512/0/248.png" alt="pretty arrow" height="76px" style="margin: auto;">
<img src="./BoondTR.png" alt="LogoBoondManager" height="76px" style="margin: auto;">
</p>
</div>
<div class="bgQueriadis">
<br><br>
<p style="margin: auto; width: 400px;font-family: 'Raleway', sans-serif;font-size: 40px;">Informations enregistrées avec succès, vous pouvez quitter la page!</p>
</div>
<div class="logoQueriadis">
<p style="font-family: 'Raleway', sans-serif; color:white;">By Queriadis Consulting &nbsp<img src="./a2f8383a-a348-4d95-a059-3ae2fb574171.png" alt="Logo Queriadis" height="20px" style="margin: auto;">
</p>
</div>
</body>
</html>

我知道这是一个糟糕的编码,我仍然是一个初学者,但任何帮助,想法或纠正是非常感谢。由于

代码有点不清楚,但我有一些建议。首先,我建议不要使用本地图像(存储在计算机上的图像),而是使用互联网上已经存在的图像。根据我的经验,在公共或半公共站点上放置本地图像可能会引起问题。其次,在指定图像高度的引号内,不需要在数字后面加上px。例如:

height = "76"  NOT height = "76px"

这里有更多关于初学者图像格式化的资源:https://www.w3schools.com/html/html_images.asp#:~:text=Try%20it%20Yourself%20%C2%BB-,HTML%20Images%20Syntax,-The%20HTML%20%3Cimg

相关内容

  • 没有找到相关文章

最新更新