title: Certain Image src="" not showing on localhost.html/localhost.php file but shows in a plain .html file
body: <p>I am creating my first website as a university project, Im not very advanced, anyway I have a very distinctive problem.
  My client has sent me a bunch of images in jpg format from google drive.</p>
  
  <p>I have an collection.php file which dynamically populates each collection got from a JSON file.</p>
  
  <p>Everything works fine except the source for the images displays nothing,
  If I use certain images I downloaded from the internet then it works fine,</p>
  
  <p>Funny thing is all those images that dont work on collection.php,
  Dont even work when I do a test file on:
  localhost/test.html,</p>
  
  <p>But when I go to the folder and simply double click the test.html file, the file opens in the browser with the following URL: file:///Users/******/Sites/test.html
  AND the image shows perfectly fine,
  Eventually I will try on the godaddy server, so if its a server issue, I hope they will work on the godaddy server
  What could be the problem?
  Here is my code:</p>
  
  <p>HTML/PHP:
      
  
  <pre><code>    //Get the collections_id from the query string and get the ranges which make up the collection from the database
      $querystring = $_SERVER['QUERY_STRING'];
      $splitQS = explode('=', $querystring);
      $collectionReference = $splitQS[1];
  
      $file = 'json/collectionSlides_' . $collectionReference . '.json';
  
      //Find get and loop through JSON data which has details about collection range sliders
  
      $collFile = file_get_contents($file);
  
      $collection = json_decode($collFile);
  
      for ($i=0; $i &lt; count($collection-&gt;Collection); $i++) { 
          $collectionDisplay[$i] = array(
              'id' =&gt; $collection-&gt;Collection[$i]-&gt;range_id,
              'heading' =&gt; $collection-&gt;Collection[$i]-&gt;heading,
              'image1' =&gt; $collection-&gt;Collection[$i]-&gt;slide1,
              'image2' =&gt; $collection-&gt;Collection[$i]-&gt;slide2,
              'image3' =&gt; $collection-&gt;Collection[$i]-&gt;slide3,
              'image4' =&gt; $collection-&gt;Collection[$i]-&gt;slide4,
          );
      }
  </code></pre>
  
  <p>JSON:
      {</p>
  
  <pre><code>"Collection":[
  
      {
          "range_id":1,
          "heading":"Pheonix",
          "slide1":"keyholebraandknickers2.jpg",
          "slide2":"wiredbrawithknickers2.jpg",
          "slide3":"wiredbrawithknickers3.jpg",
          "slide4":"xbraandsuspenderthong1.jpg"
      },
  
      {   
          "range_id":2,
          "heading":"Sophia",
          "slide1":"keyholecrossoverbraletandknickers1.jpg",
          "slide2":"keyholecrossoverbraletandknickers3.jpg",
          "slide3":"keyholecroptopandbriefs1.jpg",
          "slide4":"bustierandbriefs1.jpg"
      },
  
      {
          "range_id":3,
          "heading":"Lily",
          "slide1":"deepvbody2.jpg",
          "slide2":"braletandlacemeupbriefs1.jpg",
          "slide3":"pleatedwiredbraandbriefs4.jpg",
          "slide4":"deepvbody3.jpg"   
      },
  
      {
          "range_id":4,
          "heading":"Pearl",
          "slide1":"croptopandbriefs4.jpg",
          "slide2":"croptopandbriefs2.jpg",
          "slide3":"halftrianglecupbody3.jpg",
          "slide4":"wiredbody2.jpg"
      }       
  
  ]
  
  }
  
  
  
  
  
  ?&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#collWrap{
  display: grid;
  padding: 0.83em;
  grid-template-columns: repeat(2, 1fr);/*Currently set up for 2 in one 
  line, 4 seems too cramped */
  grid-column-gap: 0.83em;
  border: 0.08em solid red;
  }
  
  .collFrac{
  border: 0.08em solid blue;
  padding: 0.83em;
  margin: 0.83em;
  }
  .collFrac h3{
  text-align: center;
  margin-bottom: 0.5em;
  font-size: 2em;
  font-weight: lighter;
  border-top: 0.08em solid #ffffff;
  border-bottom: 0.08em solid #ffffff;
  }
  
  .collFrac img{
  width: 100%;
  display: block;
  height: auto;
  }
  </code></pre>
  
  <p>Vardump result:</p>
  
  <p>array(4) { [0]=> array(6) { ["id"]=> int(1) ["heading"]=> string(7) "Pheonix" ["image1"]=> string(26) "keyholebraandknickers2.jpg" ["image2"]=> string(25) "wiredbrawithknickers2.jpg" ["image3"]=> string(25) "wiredbrawithknickers3.jpg" ["image4"]=> string(26) "xbraandsuspenderthong1.jpg" } [1]=> array(6) { ["id"]=> int(2) ["heading"]=> string(6) "Sophia" ["image1"]=> string(38) "keyholecrossoverbraletandknickers1.jpg" ["image2"]=> string(38) "keyholecrossoverbraletandknickers3.jpg" ["image3"]=> string(28) "keyholecroptopandbriefs1.jpg" ["image4"]=> string(21) "bustierandbriefs1.jpg" } [2]=> array(6) { ["id"]=> int(3) ["heading"]=> string(4) "Lily" ["image1"]=> string(14) "deepvbody2.jpg" ["image2"]=> string(28) "braletandlacemeupbriefs1.jpg" ["image3"]=> string(29) "pleatedwiredbraandbriefs4.jpg" ["image4"]=> string(14) "deepvbody3.jpg" } [3]=> array(6) { ["id"]=> int(4) ["heading"]=> string(5) "Pearl" ["image1"]=> string(21) "croptopandbriefs4.jpg" ["image2"]=> string(21) "croptopandbriefs2.jpg" ["image3"]=> string(24) "halftrianglecupbody3.jpg" ["image4"]=> string(14) "wiredbody2.jpg" } }</p>