大家好。
总结一下,我正在尝试为我的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>     
<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  <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