MORE DETAILS:
The file structure is as follows:
Here it is on my server:
ORIGINAL: So, I'm building out the "projects" section of a website, and for some reason the images that should show aren't showing. The paths are correct but some of the images just won't appear.
I've renamed the images, changed the paths, placed in different folders but to no avail. Any suggestions? Hovering over the code in the IDE shows the image path works.
The actual site being worked on is: http://mikestrawmedia.com/index.html
That said, hovering over the image path in dev tools when testing and even when pushing the update shows no image.
HTML
<div class="portfolioContainer wow fadeInUp delay-04s">
<div class="Portfolio-box webdesign">
<img src="img/projects/bbsfl.PNG" alt="">
<h3>BBSFL -- Sim Football League</h3>
<p>Web Design</p>
</div>
<div class="Portfolio-box branding">
<img src="img/projects/mslogo.png" alt="">
<h3>Mike Straw Media</h3>
<p>Branding</p>
</div>
<div class="Portfolio-box branding">
<img src="img/projects/SGOOverlay.png" alt="">
<h3>Sports Gamers Online</h3>
<p>Branding</p>
</div>
Ultimately it was the image size. By optimizing the images for web, they loaded right up. Thank you to everyone who helped!
Related
<div class="image1">
<img src="../images/Igbo Calendar.png">
</div>
<div class="image2">
<img src="../images/RCCG directory.png">
</div>
<div class="image3">
<img src="../images/Igbostudy quiz .png">
</div>
I uploaded my html, css and image files on Github. When I view the website on my Github page, the images do not show as they do locally, only as icons
I removed the dots and the forward slash before the 'images' to see if it helped, it did not. I searched similar questions here on Stackoverflow but the suggestions I applied did not solve the problem.
github page: https://ijeoma7.github.io/website-two/
Thanks for your time.
First, I would avoid using spaces in file names when it comes to the web--use dash (-) or underscores (_) if you want to separate words in file names. For example, try changing your html code and file names to the following:
<div class="image1">
<img src="../images/Igbo-calendar.png">
</div>
<div class="image2">
<img src="../images/RCCG-directory.png">
</div>
<div class="image3">
<img src="../images/Igbostudy-quiz.png">
</div>
Second, I would double check that the image relative paths and filenames you have specified is correct in the uploaded site. (Single ./ (or no prefix) represents the directory you are in, ../ represents the parent directory, ../../ represents the gradparent directory, and so on.)
you upload images directly you not upload images
so this "../images/Igbo Calendar.png" to "Igbo Calendar.png"
View
<div class="image1">
<img src="Igbo-calendar.png">
</div>
<div class="image2">
<img src="RCCG-directory.png">
</div>
<div class="image3">
<img src="Igbostudy-quiz.png">
</div>
<section id="what-you-do" class="steps">
<h2 class="section-title secondary-border">What You Do</h2>
<div>
<img src="file:///Users/miguelpuerto/UCF-VIRT-BO-FSF-PT-08-2021-U-B/02-
Advanced-CSS/05-Module-Project/lesson-files/2.3/assets/images/step-1.svg" alt="" />
Step 1: Fill Out the Form Above.
You're already here, so why not?
I'm new at html but try to use:
<img src="../../Users/miguelpuerto/UCF-VIRT-BO-FSF-PT-08-2021-U-B/02- "
use as many ../ as it takes to reach the path. ../../../../../
Trying to add the 4 dry out logo to this html template. Can anyone correct what I did wrong? It shows this on the site:
This is a very small section of the code where I have the image placed in the body.
<body>
<!-- Loader -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- Page Content -->
<div class="container-fluid tm-main">
<div class="row tm-main-row">
<!-- Sidebar -->
<div id="tmSideBar" class="col-xl-3 col-lg-4 col-md-12 col-sm-12 sidebar">
<button id="tmMainNavToggle" class="menu-icon">☰</button>
<div class="inner">
<nav id="tmMainNav" class="tm-main-nav">
<ul>
<!--ERROR IMG --> <img data-image="4 Dry Out Logo.jpg" alt="4 Dry Out Logo">
<li>
Unless there is other code acting on your img tag, you need to use the src attribute to specify an image URL. Spaces in the image name could also be causing an issue.
You'll want to open up your web browser's developer tools and see if you can see where the image is requested in the network tab. If the URL is returning a 404 error, you know that there is an issue with your image's path. If the request for the image isn't being made at all, then there is an issue with your img tag or the code that is supposed to cause the request for the image to be sent.
<img data-image="4DryOutLogo.jpg" alt="4 Dry Out Logo">
First you need to consider renaming the image and remove white space from the name.
Second , you have to use the code as below
<img src = "../yourimagename.jpg">
Finally ,
You have to make sure that your image exist with in the server path.
I suggest you to first open the image via url link , once its open copy paste that url into the src code .
Good luck
Good morning to everyone,
After a series of attempts and research I was able to find this example that definitively solves the possibility of creating a multimedia gallery (images, selfhosted or not videos, iframe and so on).
https://codepen.io/makshh/pen/ONMVMm
It's based on photoswipe then I should insert a description in the image. I read the documentation and inserted the tag correctly but it's previewed below the thumbnail and not in the slider.
Eg:
<div class="col-md-3">
<div class="photoswipe-item">
<a href="https://www.w3schools.com/css/img_fjords.jpg">
<img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Image description" class="img-responsive">
</a>
<figcaption>dummy description</figcaption>
</div>
</div>
At this point I tried to encapsulate (as per documentation https://photoswipe.com/documentation/getting-started.html) the image in the tag but nothing to do.
Do you have any idea how to correctly insert the caption for each image / video?
Thank You in advance anyone who can help me
Regards
Ale
Code:
<div class="about-img">
<img src="https://ella.sice.indiana.edu/~macnaust/headshot.jpg" class="img-fluid rounded b-
shadow-a" alt="image not found">
</div>
When I open this as a file in my browser, I see the image just fine. But when I navigate to the published webpage, it is missing, and the alt text does not display either.
What am I doing incorrectly?
Try and remove the tilde and start over. Actually tilde '~' represents home directory. When you place tilde in url, It will access from home directory. So, put the picture in the macnaust/DevFolio/assets/img/ folder then change the src to
<img src="https://ella.sice.indiana.edu/macnaust/headshot.jpg" class="img-fluid
Try this: Change your code to below: If it works, then google up on relative vs absolute folder path.
<div class="about-img">
<img src="/macnaust/headshot.jpg" class="img-fluid rounded b-
shadow-a" alt="image not found">
</div>