title: My images won't display on Safari with website Netlify.app
body: <p>I'm building a portfolio website and I'm trying to add images to &quot;see my works&quot; section of my website.
  i have 3 images --&gt; image-1, image-2 and image-3. these works fine at my own computer but when i try to display my site in mobile, images won't display.</p>
  <p><a href="https://hopeful-hodgkin-b1ff09.netlify.app/" rel="nofollow noreferrer">see my temporary website</a></p>
  <p>see the &quot;Some examples of pages that I have done&quot; section of page.</p>
  <p><a href="https://i.stack.imgur.com/Kgb1R.jpg" rel="nofollow noreferrer"><strong>Screenshot from my phone.</strong></a></p>
  <p>this is the html for each image:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- 01 --&gt;
  &lt;figure class="port-item"&gt; 
      &lt;img src="./images/img-1.jpg" alt="Image - 1"&gt;  &lt;!-- Problem here!--&gt;
      &lt;figcaption class="port-desc"&gt;
          &lt;p&gt;Project Title&lt;/p&gt;
          &lt;a href="" class="btn btn-accent"&gt;See Live&lt;/a&gt;
      &lt;/figcaption&gt;
  &lt;/figure&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/7wdMd.png" rel="nofollow noreferrer">See images I use on my website</a></p>
  <p>More HTML and CSS :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
      width: 100%;
      height: 100%;
  }
  
  .portfolio h2 {
      margin: 2em;
      font-size: 2em;
      padding: 10vh 0;
      border-bottom: solid 1px rgba(0, 0, 0, 0.2);
  }
  
  
  
  .port-item {
      position: relative;
  }
  .port-desc {
      position: absolute;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7);
      width: 100%;
      height: 10rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  .port-desc p{
      margin-bottom: .5em;
      font-size: 1.8em;
  }
  @media only screen and (min-width: 600px) {
      .port-items {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(15em,1fr));
      }
      
      
  }
  @media only screen and (min-width: 1000px) {
      .port-item {
          overflow: hidden;
      }
      .port-desc {
          transform: translateY(100%);
          transition: transform .4s ease;
      }
      .port-item:hover .port-desc {
          transform: translateY(0);
          
  }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;section class="portfolio"&gt;
      &lt;h2&gt;Some examples of pages that I have done&lt;/h2&gt;
          &lt;div class="port-items"&gt;
              &lt;!-- Itee -&gt; 01 --&gt;
              &lt;figure class="port-item"&gt;
                  &lt;img src="images/img-1.jpg" alt="Image - 1"&gt;
                  &lt;figcaption class="port-desc"&gt;
                      &lt;p&gt;Project Title&lt;/p&gt;
                      &lt;a href="" class="btn btn-accent"&gt;See Live&lt;/a&gt;
                  &lt;/figcaption&gt;
              &lt;/figure&gt;
  
              &lt;!-- Itee -&gt; 02 --&gt;
              &lt;figure class="port-item"&gt;
                  &lt;img src="images/img-2.jpg" alt="Image - 2"&gt;
                  &lt;figcaption class="port-desc"&gt;
                      &lt;p&gt;Project Title&lt;/p&gt;
                      &lt;a href="" class="btn btn-accent"&gt;See Live&lt;/a&gt;
                  &lt;/figcaption&gt;
              &lt;/figure&gt;
  
              &lt;!-- Itee -&gt; 03 --&gt;
              &lt;figure class="port-item"&gt;
                  &lt;img src="images/img-3.jpg" alt="Image - 3"&gt;
                  &lt;figcaption class="port-desc"&gt;
                      &lt;p&gt;Project Title&lt;/p&gt;
                      &lt;a href="" class="btn btn-accent"&gt;See Live&lt;/a&gt;
                  &lt;/figcaption&gt;
              &lt;/figure&gt;
          &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  
  <strong>Note: my index.html and images folder are in the same folder.</strong></p>
  <p><a href="https://i.stack.imgur.com/jYOv9.png" rel="nofollow noreferrer"><strong>My folders</strong></a></p>