为什么我来自 url 的图片没有显示？

Question

Why isn't my image showing up with the url I'm using? The url is valid and I used the same method to insert other images and it worked. First code is the url that isn't showing up and the other one are the images that are showing up. I have also included the images of what appears on the webpage for the unresponsive image as well as the responsive one.

 <div>
      <img src=”https://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" /> 
      <h1 id="myname">John Smith</h1>
      <h3>Web developer</h3>
      <p>{{ pause and ponder }}</p>
    </div>
      </div class="intro">

 <div class="project-grid">
      <img class="project-image" src="http://via.placeholder.com/300" />
      <img class="project-image" src="http://via.placeholder.com/300" />
      <img class="project-image" src="http://via.placeholder.com/300" />
      <img class="project-image" src="http://via.placeholder.com/300" />
    </div>

I don't understand what the issue I did the exact same thing for both but only the second group of images is showing up on my webpage.

Answer 1

You used "https://...." for the profile picture, but if your development server is on "http://...", then the profile picture won't show up due to cross-protocol restrictions.

Change <img src=”https://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" /> to <img src=”http://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" />

Answer 2

You've got special character quote marks instead of regular ones surrounding the src attribute.

Change the ” character to " . Most likely it was converted in something like Word or Outlook.

Fixed HTML:

<img src="https://via.placeholder.com/150/0000FF/808080" alt="Profile Pic" />