this would be correct if the folder “images” is inside the “portfolio” folder
try using src=”../images/project-4.jpg” instead
edit:
if by “under” it you mean inside it, try changing the “../” with “./”
it could also be a typing mistake so make sure to copy the folder/images names
images folder and the file (index.html) in which you are using these images
must be in same root directory (portfolio) folder.
--- index.html(file)
|
| <div class="project-grid">
| <img class="project-image" src="images/project-1.jpg" />
| <img class="project-image" src="images/project-2.jpg" />
| <img class="project-image" src="images/project-3.jpg" />
| <img class="project-image" src="images/project-4.jpg" />
| </div>
|
|
|
--- images(folder)
project-1.jpg
project-2.jpg
project-3.jpg
project-4.jpg
I’m trying to add an image into my HTML file directly from my computer but it wont show up on my webpage.
I have a folder named portfolio containing my HTML file and CSS file. Under portfolio I have another folder named images containing all my images I wish to use.
This is the code I’m using:
<div class="project-grid">
<img class="project-image" src="images/project-1.jpg" />
<img class="project-image" src="images/project-2.jpg" />
<img class="project-image" src="images/project-3.jpg" />
<img class="project-image" src="images/project-4.jpg" />
</div>
Open the developer tools (usually F12), on network tab, select the GET requests for those images, and update your question with the error responses
Request URL: file:///C:/Users/Guest/Documents/Portolio/images/project-1.jpg
For me it was probably the browser itself. If you think it’s the website, it maybe the image was not found. Define it by adding the previous file path
And what is the error response? IS the path identical to your images real location?