简体   繁体   English

为什么我的计算机中的图像不会显示在 html 上?

[英]Why won't my images from my computer show up on html?

在此处输入图像描述 在此处输入图像描述 Why won't my images from my computer show up in my html file I had no issue using images from the web using the url. I saved my html file, css and images all in on folder but it doesn't show up on the website.为什么我的计算机中的图像不显示在我的 html 文件中 我使用 url 使用来自 web 的图像没有问题。我保存了我的 html 文件、css 和图像全部在文件夹中,但它没有显示在网站。 This is the code I used using Sublime Text Editor.这是我使用 Sublime Text Editor 时使用的代码。

<div>
  <img src="/images/profile-pic.jpg"/>
  <h1 id="myname">John Smith</h1>
  <h3>Web developer</h3>
  <p>{{ pause and ponder }}</p>
</div>
  </div class="intro">

Now you provided screenshots, I can try to help better.现在您提供了屏幕截图,我可以尽力提供更好的帮助。 In the folder tree, you can see folder named Portfolio and folder named Images are on same level.在文件夹树中,您可以看到名为 Portfolio 的文件夹和名为 Images 的文件夹处于同一级别。 Because of this, when you are inside of folder Portfolio, you should navigate one level up.因此,当您在文件夹 Portfolio 中时,您应该向上导航一个级别。

Please try to use请尝试使用

<img src="../images/profile-pic.jpg">

Another easy way to do this.另一种简单的方法来做到这一点。

Go to your files on your system, navigate to the folder where your image is stored right click and click properties then copy out the address there. Go 到您系统上的文件,导航到存储图像的文件夹,右键单击并单击属性,然后复制那里的地址。

Just give a correct path of the image in the html file and remove the forward slash (/) behind the path.只需在 html 文件中给出图像的正确路径并删除路径后面的正斜杠 (/)。

Most likely you're in a new directory and need to come back up one level.您很可能在一个新目录中,需要返回上一级。 You could try:你可以试试:

<img src="../images/profile-pic.jpg"/>

Now on folder structure, this is how you arrange your documents.现在在文件夹结构上,这就是您排列文档的方式。

First create a folder for your entire website.首先为您的整个网站创建一个文件夹。 Let's call it "Codes" Then in codes add the HTML file and name it "index"(easier for the browser to recognize when hosting) the along side the index create another folder for your additional material.我们称它为“代码”然后在代码中添加 HTML 文件并将其命名为“索引”(在托管时浏览器更容易识别),索引旁边会为您的其他材料创建另一个文件夹。 Example images, font files, CSS files,videos and lot more.示例图像、字体文件、CSS 文件、视频等等。 Name the folder asset.命名文件夹资产。 Then in asset, create a folder for keeping the images only, another for CSS files and another for font files.然后在资产中,创建一个仅用于保存图像的文件夹,另一个用于 CSS 文件和另一个用于字体文件。

Then you are done Copy address from the first folder created( this is easier)然后你就完成了从创建的第一个文件夹复制地址(这更容易)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM