HTML我想上传保存在桌面上的.jpg图像

时间:2017-09-06 05:03:51

标签: html css

我需要将图像导入到我的html网站。我不知道使用什么代码。我的html编码位于一个名为Nixr的文件夹中。它在我的桌面上。我试图上传到html网站的咖啡照片也在名为coffee.jpg的Nixer文件夹中。

我尝试使用的代码:

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

我的html编码:

<HTML>

<HEAD> </head>

<BODY style="background-color:powderblue;">

<br> <br> <br>

<style>

div {
border: 1px solid black;
margin-top: 0px;
margin-bottom: 67px;
margin-right: 210px;
margin-left: 1000px;
background-color: powderblue;
text-align: center;
}

</style>
</head>
<body>

<div>
<h2><b>Log In!</b>.</p> 

<form>
Login:<br>
<input type="text" name="username"><br> <br>
Password:<br>
<input type="password" name="psw">
</form>
</p>

<button type="button">Log In!</button> <br> <br>

<b>Sign Up Today!</b>.</p>

<form action="/action_page.php">
First name:<br> 
<input type="text" name="firstname"> <br> <br> 
Last name:<br>
<input type="text" name="lastname"> <br> <br>

<form action="/action_page.php">
E-mail: <br>
<input type="email" name="email"> <br> <br>

<form action="/action_page.php">
Birthday: <br>
<input type="date" name="bday"> <br> <br> 

<form action="">
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
</form> 

<p>By clicking Create Account, you agree to our Terms and that you <br> have 
read our Data Policy, including our Cookie Use.</p> 

<button type="button">Create Account</button> </h2>

</div>
</body>
</html>

4 个答案:

答案 0 :(得分:1)

如果您想通过文件夹目录中的表单上传照片,那么您必须使用PHP。

要通过表单上传图像并显示它,请参阅此内容 https://www.w3schools.com/php/php_file_upload.asp

如果您只想通过HTML显示它,那么您可以使用它:

<img src="filelocation/filename.jpg" style="height:100px;width:100px;" />

如果您的文件在目录之外,那么

<img src="../filelocation/filename.jpg" style="height:100px;width:100px;" />

答案 1 :(得分:0)

我不认为你问这个问题是对的。除非我感到困惑。您不想丢弃照片,只要您想使用图像网址让计算机为您找到图片。

我的建议是你的index.html应该存在于一个文件夹中。对于此示例,该文件夹的名称为“Site_folder”,您的图像文件名为“coffee.jpg”

然后您将使用图片标记:

<img src ="site_folder/cofee.jpg" />

答案 2 :(得分:0)

使用这个: <img src="name.jpg"> 只需使用您的名字及其扩展名JPG或jpeg。检查图像的详细信息,如果它位于同一文件夹或同一位置,则仅使用该名称。

答案 3 :(得分:0)

我想你应该经常在这里知道如何提问。

关于你的问题,

您需要创建一个正在处理的文件夹。 将文件index.html(HTML文件)和style.css(CSS文件)保存在该文件夹中。 创建一个子文件夹资产,您需要放置所有图像和.js文件。 这是我遵循的标准。

现在,您可以使用代码

轻松调用所需的图像

<img src="assets/flower.jpg" alt="flower" style="width:100%">

src标签会拍摄你的照片。

如果未加载图像,

alt标记将成为替代显示。

宽度标签将调整放置图像的位置。

欣赏是否有用。