Images are not displaying

Hi,
I’m trying to stand up a website here for the first time. The text, spacing and layout all look fine, but none of the images will display. The images are in a subfolder simply named “images”.

The website is trainwithpurpose.great-site.net

I have tried using .webp, .png, and .jpg None of them display for me. I have tried both Chrome and Edge with the same results.

I clicked on the space for a missing image and copied the link:

And here is the structure on the site:
image
The file names are in the correct case I believe.
Any help would be much appreciated.

2 Likes

Hi and welcome to the forum

The server is case sensitive
so the name of the directory is not images but Images

Here is an example with a capital letter in URL http://www.trainwithpurpose.great-site.net/Images/TWP_Large.webp

FIX
Rename the folder Images to lowercase images
because it’s easier than editing code

6 Likes

Thank you, I did get an image to display by that simple change. Does the site support .webp file types?

1 Like

visit your site and then press CTRL + F5 - to clear the browser cache
because your browser keeps the older version in the cache
instead of refreshing the code

6 Likes

Thank you. I’m slowly gaining on it. I’m new to HTML coding and have not yet hardwired being consistent with some things. I still have a couple of images not displaying and one is the background image. I’ll keep at it.
Thanks for your help.

3 Likes

If you want to have more performance and faster loading times, use cdn. You may wanna read this:

2 Likes

Thank you. I’ve used IMGBB to do this once before for sort of a specialized application. I will try it and see how it does. If I need video, I will embed it from YouTube in all likelihood.

I’m not having much luck. The like created open the background image just fine, but when I put it in one of the pages for testing, it doesn’t appear at all. The link is https://ibb.co/8Pdk44V/blue_background.wepb and just putting it into a browser works. But for some reason it doesn’t appear on the page. The line of code looks like this:
background-image: url (“Blue-Background hosted at ImgBB — ImgBB”);

I haven’t tested any other images yet but will later today.
Thanks

Can you share the actual code you used? You can just copy and paste it here.

Thanks

2 Likes

Here is the entire page. At this point I’m only hosted image I’m attempting to use is the background. The other images are in the image folder on the InfinityFree site. Those images work, just not the background image.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300&display=swap" rel="stylesheet">
    <title>Train With a Purpose! Pistolcraft For The Serious Student!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <style>
      * {
        box-sizing: border-box;
      }

      /* Add a background image with some padding */
      .body {
        font-family: 'Cairo', sans-serif;
        font-size: 120%;
        padding: 30px;
        margin: 20px;
        background-image: url ("https://ibb.co/zxCfZKN");
      }

      #wrapper1 {
        padding-left: 250px;
        padding-right: 250px;
        padding-top: 30px;
        padding-bottom: 30px;
      }

      img {
        display: block;
        max-width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
      }

      /* Header/Blog Title */
      .header {
        padding: 10px;
        font-size: 40px;
        text-align: center;
        background: white;
      }

      img {
        float: right;
      }

      .topnav {
        overflow: hidden;
        background-color: #0000b2;
      }

      .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
      }

      .active {
        background-color: #008bff;
        color: white;
      }

      .topnav .icon {
        display: none;
      }

      .dropdown {
        float: left;
        overflow: hidden;
      }

      .dropdown .dropbtn {
        font-size: 17px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
      }

      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
      }

      .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
      }

      .topnav a:hover,
      .dropdown:hover .dropbtn {
        background-color: #0033ff;
        color: white;
      }

      .dropdown-content a:hover {
        background-color: #ddd;
        color: black;
      }

      .dropdown:hover .dropdown-content {
        display: block;
      }

      @media screen and (max-width: 600px) {

        .topnav a:not(:first-child),
        .dropdown .dropbtn {
          display: none;
        }

        .topnav a.icon {
          float: right;
          display: block;
        }
      }

      @media screen and (max-width: 600px) {
        .topnav.responsive {
          position: relative;
        }

        .topnav.responsive .icon {
          position: absolute;
          right: 0;
          top: 0;
        }

        .topnav.responsive a {
          float: none;
          display: block;
          text-align: left;
        }

        .topnav.responsive .dropdown {
          float: none;
        }

        .topnav.responsive .dropdown-content {
          position: relative;
        }

        .topnav.responsive .dropdown .dropbtn {
          display: block;
          width: 100%;
          text-align: left;
        }
      }

      /* Create two unequal columns that floats next to each other */
      /* Left column */
      .leftcolumn {
        float: left;
        width: 75%;
      }

      /* Right column */
      .rightcolumn {
        float: left;
        width: 25%;
        padding-left: 20px;
        margin-bottom: 30px;
      }

      /* Add a card effect for articles */
      .card {
        background-color: white;
        padding: 20px;
        margin-top: 20px;
      }

      /* Clear floats after the columns */
      .row:after {
        content: "";
        display: table;
        clear: both;
      }

      /* Footer */
      .footer {
        padding: 40px;
        text-align: center;
        background: #ddd;
        margin-top: 60px;
      }

      /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
      @media screen and (max-width: 800px)

        .leftcolumn,
        .rightcolumn {
          width: 100%;
          padding: 0;
        }
    </style>
  </head>
  <div id="wrapper1">
    <div class="body">
      <div class="header">
        <img src="images/TWP_Large.webp" alt="Train With a Purpose Logo" style="width:300px;height:220px;">
        <h1>Train With A Purpose</h1>
        <p style="font-size:72%;">
          <i>"When in training or in practice, have specific improvement goals as the outcome."</i>
        </p>
      </div>
      <div class="topnav" id="myTopnav">
        <a href="index2.html" class="active">Home</a>
        <a href="blogpage2.html">Head Games</a>
        <div class="dropdown">
          <button class="dropbtn">Tutorial Musings <i class="fa fa-caret-down"></i>
          </button>
          <div class="dropdown-content">
            <a href="AboutThatStance.html">About That Stance</a>
            <a href="HandgunPresentation.html">Handgun Presentation</a>
            <a href="TheProperGrip.html">The Proper Grip</a>
          </div>
        </div>
        <script>
          function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
              x.className += " responsive";
            } else {
              x.className = "topnav";
            }
          }
        </script>
      </div>
      <div class="row">
        <div class="leftcolumn">
          <div class="card">
            <h2>Before You Get a Gun</h2>
            <h4>Sept, 2022</h4>
            <img src="images/mugger.webp" alt="Mugger" style="width:920px;height:300px;margin-left:5px;">
            <p>There are some things you can start doing right now to help you keep safe.</p>
            <p>
              <strong>Avoidance and Awareness</strong> If you will become diligent in practicing avoidance and awareness, half the battle is won. But it is harder for most people than you might imagine. Life is full of distractions and putting them all aside and keeping your head up and tracking your surroundings day in and day out requires commitment and discipline. Most of us know better than to have our faces buried in our phones instead of watching what's going on around us. Awareness is just what it sounds like. What is going on around you? Where are potential risks? Are there any potential threats? Depending on where you are, these things can change from moment to moment. The busy parking lot of a popular mall during the Christmas shopping season means your head needs to be on a swivel just looking out for traffic let alone those individuals who are potential trouble. The extreme opposite is sitting in your living room in a peaceful neighborhood with the doors locked, your enormous and attentive Doberman next to you, and a good book. The first situation requires rather more attention and more conscious awareness than the second situation.
            </p>
            <p>Some people feel foolish attempting to create and maintain a high level of awareness. They often feel silly, like they are being paranoid. Yet, I will take feeling a little silly over getting mugged any day. It cost you nothing to keep your head up and pay attention to your surroundings. But it does require discipline to instill this as a habit so that when you move out of your safe space, it requires no conscious thought on your part to start monitoring and assessing your surroundings.</p>
            <p>Look for things or people that are out of place, or appear to focus on you for no apparent reason. There may be a legitimate reason they have zeroed in on you. But if your gut feeling is that something is wrong, pay attention to it. It may still be nothing, but it's better to be ready than to be caught flat-footed. Situational awareness can be the difference between avoiding a confrontation to being a statistic. I encourage you to embrace it and commit to it.</p>
            <p>Avoidance goes hand in hand with awareness. Places that have bad reputations should be avoided. If you must go there, go during the daylight hours and don't go alone if you can help it. Put your ego aside and find somewhere else to get what you need. Keep in mind that bad guys who are interested in taking your wallet, watch, and cell phone are not interested in getting caught. They will choose locations with little light, not much chance for any witnesses, and one that allows them a chance to escape from you. They don't want to fight you, they just want your stuff and they want to get it with the least amount of risk to themselves and avoid getting caught.</p>
            <p> I used to teach self-defense classes at a hospital I once worked at. I'd always give my students an assignment. I'd tell them to pretend they are the mugger. I'd ask them as they went about their normal routine to find places where they thought they could mug someone without getting caught and without the risk of their intended victim fighting back or getting help. This was usually eye-opening for them and they were often surprised at some places they went that suited such acts and they had never concerned themselves with going there before. But they did after they thought about how easy it would be for a mugger or a rapist to take advantage of the time and place. </P>
          </div>
          <div class="card">
            <h2>The OODA Loop</h2>
            <h5>Sept, 2022</h5>
            <img src="images/OODA.webp" alt="OODA Loop" style=width:600px;height:200px;>
            <p>
              <strong>The OODA Loop</strong> is something that was conceived way back in the ’60s by US Air Force Colonel John Boyd. It has become an important concept in military strategy, law enforcement, and even in business. While Boyd was mainly concerned with fighter pilots, the OODA loop works for a lot of things. OODA stands for “Observer”, “Orient”, “Decide”, and “Act”. You may not realize it, but most people do this every day without even thinking about it. Like when you are driving a car. You observe the traffic around you. You orient your vehicle properly in the lane or intersection. You decide to brake or accelerate or change lanes as the conditions require, and then act on the decision. This is the OODA loop in a nutshell. If an armed confrontation, you will be doing the same thing. I hope. Remember the idea of awareness. <br>
              <strong>Observation.</strong> If you miss this step, well good luck. You might be the next statistic. Just a hint here, but awareness and avoidance should be a habit. It is a habit you must develop and that takes a conscious effort. You might think you are being paranoid to practice such a thing. You might feel silly. But as an individual, you are responsible for your own safety. The police can’t be everywhere at once to keep you safe. You are the one responsible and if you fail to take that responsibility seriously then you may as well stop reading right here. So now you understand the first “O”, let’s get to the second one. <br>
              <strong>Orient.</strong> What does it mean to orient yourself after you have observed a potential threat? If possible, you want to orient yourself to avoid contact. Let’s say you are being observant and some guy in a hoodie is leaning against the wall some distance ahead of you. He spots you and stands up straight and starts walking toward you. He may only want to know what time it is. But you have an uncomfortable feeling. What do you do? You might simply cross the street. This may be enough for him to realize he’s not going to surprise you and he may pass you as a victim. Or he may cross the street to intersect you. If he does that, you pretty well know that he plans on making contact with you and it’s not going to be avoided easily. So be ready. In other instances, you may inch toward something that can be used as cover or position yourself where no one can get behind you. You may try and get under a streetlight or close to a door you duck into, so you are around other people. It may be that you do nothing more than get yourself ready to fight in an unarmed or armed conflict. But make every effort to gain an advantage by orienting yourself on the high ground. <br>
              <strong>Decide:</strong> This is where the rubber meets the road so to speak. When things go south, we have a tendency to go straight into denial. We don’t want to admit to ourselves that we are in mortal danger or that we may have to deliberately hurt or kill another human in the defense of our lives. It’s frankly something no intelligent and moral person wants to do. But it may be necessary to survive the encounter. Denial is a normal thing for almost all of us. But some people take far longer to reach acceptance than others. Much of this is due to mindset. And here is something I’ve discovered. The time to decide if you can act to harm another person in defense of your life is not the moment you are first faced with the decision. Decide ahead of time, put a lot of thought and “what if’ questions into it. If you cannot commit, then I advise against half-measure. Simply cooperate to the best of your ability with your attacker and hope for the best. Your chance of surviving are rather better from a statistical standpoint. However, they are woefully lower than if you defend yourself with a gun. The bad news is, you may have only fractions of a second to decide and act. Don’t misunderstand me here. I’m not suggesting that you should be ready to outdraw a BG like in they do in the westerns. I’ll get to that later, but right now, I want to stay on the OODA loop, so you understand what the sequence is. In martial arts, you learn a lot of techniques. If you are going to respond in an unarmed manner and you are well trained martial artist, you have a LOT of options with most martial arts. But a large number of options can, and sometimes does slow down the decision part of OODA. You need to use the right tool, the right option, but you also need to limit yourself, so you don’t have to run through dozens of picks in the decision-making process. You likely won’t have the time. You also need to act in a legal manner. I know that there is the old cliché, “I’d rather be judged by 12 than carried by six.” And it’s true. But if you need to remember that most states have a continuum of force type of law. You can use a level of force that is only enough to adequately defend yourself and no more. Yeah going to jail is probably better than dying. But going to jail is far worse than just filling out a police report and going home. Maybe going home to your family who is waiting on you. And you really don’t want to end a life if you don’t have to. It’s not a nice thing to have to live with for most people. In short, maybe that guy really does just want to know what time it is, and you should not be pulling your gun as your only option for his approach.<br>
              <strong>Act:</strong> Whatever you decide, the time to act will come. But generally, your decision will be to act “if” the potential threat materializes and only then. If the person of concern, the potential threat simply passes you by and keeps going, there is no need to act, but to simply maintain awareness and continue to be on your toes. However, if it turns out that the potential threat materializes, you have to determine the threat level and act. This is where we get into the concept, the technique, the practice, the repetitions, the time, the energy the expense, and whatever else it takes to prepare yourself.
            </p>
            <p>Keep the OODA loop in mind as you go about your day-to-day routine. Keep safety at the fore front when you are armed. These habits will serve you well.</p>
            <p style="font-size:125%;">
              <i>
                <strong>"You will not rise to the occasion, you will default to your level of training."</strong>
              </i>
            </p>
            <br>
          </div>
          <div class="card">
            <h2> Quick Draw McGraw, NOT!"</h2>
            <p>I mentioned earlier that in some situations, you may need a smooth, quick presentation. Don't confuse this with the idea of "outdrawing" the bad guy. Imagine a situation where the BG (Bad Guy) has stepped into the quick stop where you were grabbing something to drink and waiting to check out. The BG is nervous, looking around making sure he has eyes on everyone and that no one is going to walk in and surprise him. He then grabs all the cash he can find and orders you and the clerk to go to the back room, but he's still looking around. That demand to move to the back room doesn't sound good to you and you feel you must act. The BG looks back to the front door one more time. You have about three seconds. Can you draw from concealment and make the shot? I've seen this very thing on a handful of surveillance videos from real-life situations. It happens.</p>
            <p>The ability to make a clean, fumble-free draw and first shot or double tap is not all that difficult, but to do it fast and accurately when under the adrenaline dump is going to require a great deal of practice and muscle memory. Don't think it's going to happen because you need it to happen. Practice and practice with a purpose is required. You are going to hear this thing about practice again and again from me. I've seen too many so-called practice sessions where they do little more than mag dumps or simple slow fire. And often without even drawing from a holster. Not much is getting accomplished with that sort of "practice". So forgive me if I repeat things about practice ad nauseam. These are perishable skills and they need attention. They need variables thrown into practice and they need it often. (Perhaps this also helps some of you to understand why your hours in a deer stand with your hunting rifle don't do much for this type of skill). Keep at it, and follow all of the safety rules when practicing either with dry fire or live fire. And when I say, "practice with a purpose", I mean that you need to be looking for specific improvement on a specific skill. Don't spend much time doing what I'd call "general practice". General practice is ok but seldom yields specific results. A smooth, fumble-free weapon presentation from concealment with your first shot on target at seven yards is something I deem to be very important. Notice I didn't mention speed. That's because speed will come as you eliminate any wasted motion and that includes any sort of bouncing, bobble, or having to adjust your grip after you draw, or waste time acquiring the sight picture. And it takes practice, with a purpose.</p>
          </div>
        </div>
        <div class="rightcolumn">
          <div class="card">
            <h2>Practice!</h2>
            <p>Practice in and of itself does not make for perfect performance. Only perfect practice makes for perfect outcomes. When you are practicing, make it count. <strong>Practice with a purpose!</strong> What do I mean by that? Well, if you feel like your presentation is weak, then you need to practice in such a way as to focus on that and get it better. Better is smoother, with no wasted motion, proper grip, and is ready to break the shot as you near full extension. This doesn't just happen. You have to practice those elements to make it happen. Every single time you remove your handgun from your holster on your hip, use it as another repetition to establish the proper grip, have your offhand in the correct position, eliminate any wasted motion press the gun out and establish the offhand properly, and get your sights to the properly aligned sight picture. Practice smooth, practice precisely, and practice safely. </p>
            <p>Start slow and makes sure you are doing the foundational parts of the technique properly. (I'll go through the steps of a proper presentation at a later date for you new folks. We all have to start somewhere.). Slowly increase your speed until you are at about 80% to 85% of your full speed. Don't go as fast as you physically can go because your muscles and bone structure will bounce and that requires additional time to recover from. Take about 20 reps to hit that speed limit. Practice drawing and shooting from up close, say 3 to 5 yards. When you have shot your gun empty, do a speed reload. Do it smoothly, do it up in front of your face so you can still watch your target yet use your peripheral vision to do the mag change. Smooth is wildly important when doing a speed reload. Then go back to your presentation practice until you need to reload again. Use every action with the intent of getting better. Check your shot placement, if you are not hitting very well at this distance, slow down until you are and stay at that speed for a while.</p>
            <p> I typically will fire about 200 rounds each range section just practicing my presentation before moving on. I usually move on next to the presentation and double tapping the target. Then I practice the presentation and engaging multiple targets with a double tap. I can easily do more than 400 presentations in a typical practice session at the range. Practice with a purpose.</p>
          </div>
          <div class="card">
            <h3>Dryfire Practice</h3>
            <p>
              <strong>Dry fire practice</strong> is simply practicing without using live ammunition. Dry fire practice is very valuable and of course, it's also cost-effective. But <strong>safety</strong> practices are a must when it comes to dry fire practice. Here are some strong suggestions when it comes to dry fire practice: <br> 1. Do not have any live ammunition in the same room you will be practicing in. <br> 2. If at all possible, aim only at some part of the room that should stop a bullet, like a brick fireplace. <br> 3. If possible, have a second, competent person double-check your firearms to assure it's unloaded. <br> 4. While not absolutely necessary, I recommend using snap-caps or dummy rounds that are clearly NOT real ammunition. <br> 5. Avoid distractions while doing dry fire practice. No one else in the same room, no cell phone, and no TV. <br> 6. Practice with a purpose. <br> 7. Practice daily if you can. Even 15 to 20 minutes will yield positive results in a short time. <br>
            <p> I can't stress enough how important it is to make absolutely sure that there is no live ammunition in the same room or area you are conducting dry fire practice. There are many methods for dry fire practice these days including some that use plastic pistols. Some of them have moving parts and function much like the real thing but don't shoot anything, other than perhaps a laser.</p>
            <p>Another option is to use a spring-powered airsoft gun in the same make a model as your carry gun if one is available. They are inexpensive ($30 for the last one I bought.) Triggers are not great but work, and you'll have to pick up the little airsoft pellets when you are through. But they are still safer than a real gun and you should still treat them as if they were real when practicing. These tools are quite valuable to most shooters and you should consider using them. This is particularly true if you don't have regular access to a shooting range or if the current ammo situation makes the cost of regular range practice unreasonable.</p>
            <p style="font-size:132%;">
              <i>
                <strong>Fortune favors the prepared!</strong>
              </i>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="wrapper1">
    <div class="footer">
      <h2>Contact Info</h2>
      <p> Feel free to email if you have questions or suggestions about this website.</p>
      <p> Please use [email protected] for any communications.</p>
  </div>
  </body>
</html>

Here are the errors with the code you provided:

The first one is the reason why the image is not displaying.


It should be:
background-image: url("path/to/image");
(Note the lack of a space)

1 Like

Should be this:
background-image: url("https://i.ibb.co/3dVhctk/Blue-Background.webp"); ← the actual image, not the HTML link to it.

4 Likes

Ok, that worked. I have a different HTML page where i just used the link and it works fine, but the context is different so maybe that is why. I appreciate your help. I’ll start the process of changing the rest of the images. I have to say that if I edit on the site itself, it often says it times out before it saves. Maybe it’s better to edit locally and then upload the file. I’m still pretty new too all this and I’m self-taught.
Thanks again

Thanks for looking at this. Can I ask what validator you used?

4 Likes

Thanks for that. Does the same format work for other images that are not background images? I can’t get any of them to display from the hosted site. Here is what I have using the images on the web server:

<img src="images/TWP_Large.webp" alt="Train With a Purpose Logo" style="width:300px;height:220px;">

When I change it to <img src="https://ibb.co/hyFVW36/TWP_Large.webp" alt="Train With a Purpose Logo" style="width:300px;height:220px;"> I only get the alt text.

Because that is not an image address. The image address is https://i.ibb.co/37mcNg3/TWP-Large.webp.

4 Likes

Well, ok. I did however just cut and paste it after I uploaded it.

The page that is shown after you upload the image is not an image address, it’s an HTML page. So you can’t copy that link.

2 Likes

When you upload an image to imgbb it gives you several options after image is uploaded, just click direct link option and copy the link.
Like:
Screenshot_20221201_190338
Then:
Screenshot_20221201_190400

That’s it.

2 Likes