儘管在html中給出了正確的路徑，但沒有正確查找圖像源

我遇到了問題。我以前在html中使用過圖像，但似乎從來沒有出現過問題。我在部分項目中工作，我正在給文件夾提供正確的路徑，但圖像只是沒有顯示出來。所有的圖像都有同樣的問題。這裏是我的代碼片段：儘管在html中給出了正確的路徑，但沒有正確查找圖像源

<div class="grid-col grid-col-12"> 
          <div class="item-instructor bg-color-1"> 
           <a href="page-profile.html" class="instructor-avatar"> 
            <img src="UniLearn/UniLearn%20(with%20Options%20Panel)/img/saif.jpg" alt=""> 
           </a> 
           <div class="info-box"> 
            <h3>M Saifur Rahman</h3> 
            <span class="instructor-profession">Director,Business Development</span> 

            <div class="divider"></div> 


<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal">Read More</button></center> 
    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title" style="color: black;">M Saifur Rahman</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="biography-image"> 
           <img src="http://placehold.it/210x220" align="left"> 
      </div> 
      <div class="biography-info"> 
       <p> 
</p>  

      </div> 

     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 




           </div> 
          </div> 
          <div class="item-instructor bg-color-3"> 
           <a href="page-profile.html" class="instructor-avatar"> 
            <img src="http://placehold.it/210x220" alt=""> 
           </a> 
           <div class="info-box"> 
            <h3>Bijon Islam</h3> 
            <span class="instructor-profession">CEO</span> 
            <div class="divider"></div> 


<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal1">Read More</button></center> 
    <!-- Modal --> 
    <div class="modal fade" id="myModal1" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title" style="color: black;">Bijon Islam</h4> 
     </div> 
     <div class="modal-body"> 
     <div class="biography-image"> 
           <img src="http://placehold.it/210x220" align="left"> 
          </div> 
      <div class="biography-info"> 
      <p></p> 
      </div> 

     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 
           </div> 
          </div> 
         </div> 
         <div class="grid-col grid-col-12"> 
          <div class="item-instructor bg-color-2"> 
           <a href="page-profile.html" class="instructor-avatar"> 
            <img src="http://placehold.it/210x220" data-at2x="http://placehold.it/210x220" alt> 
           </a> 

           <div class="info-box"> 
            <h3>Ivdad Ahmed Khan Mojlish</h3> 
            <span class="instructor-profession">Managing director</span> 
            <div class="divider"></div> 
     <center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal2">Read More</button></center> 
    <!-- Modal --> 
    <div class="modal fade" id="myModal2" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title" style="color: black;">Ivdad Ahmed Khan Mojlish</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="biography-image"> 
           <img src="http://placehold.it/210x220" align="left"> 
          </div> 
      <div class="biography-info"> 
       <p></p>  
      </div> 

     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 


           </div> 
          </div> 
          <div class="item-instructor bg-color-6"> 
           <a href="page-profile.html" class="instructor-avatar"> 
            <img src="http://placehold.it/210x220" data-at2x="http://placehold.it/210x220" alt> 
           </a> 
           <div class="info-box"> 
            <h3>Zahedul Amin</h3> 
            <span class="instructor-profession">Directory,Finance & Strategy</span> 
            <div class="divider"></div> 
              <center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal3">Read More</button></center> 
    <!-- Modal --> 
    <div class="modal fade" id="myModal3" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title" style="color: black;">Zahedul Amin</h4> 
     </div> 
     <div class="modal-body"> 
       <div class="biography-image"> 
           <img src="http://placehold.it/210x220" align="left"> 
          </div> 
      <div class="biography-image"> 

      <p></p> 
      </div> 

     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 


           </div> 
          </div> 
         </div> 
        </div>

我htdocs目錄路徑是這樣的： F：\ XAMPP \ htdocs中\主頁文件\ UniLearn \ UniLearn（有選項面板）\ IMG

來源

2017-07-17 Saif Kamal

什麼是Html文檔本身的路徑？你如何瀏覽你的作品？你只使用Web瀏覽器或IIS等Web服務器嗎？ –

F：\ xampp \ htdocs \ Main Files \ UniLearn \ UniLearn（帶選項面板）\ img ..在谷歌Chrome中工作 –

如果是這樣，那麼你的HTML文檔與Image的路徑相同，所以你只需要把SRC作爲圖像的名稱 src ='saif.jpg' –

哥，我認爲這個問題是在路徑，你這裏有3種選擇基礎上，你的HTML網頁位置： -

如果.html文件是在同一文件夾與圖像的代碼應該是這樣的：

<a href="page-profile.html" class="instructor-avatar"> 
    <img src="saif.jpg" alt=""> 
</a>

（html的saif.jpg旁頁）

如果.html文件是一個文件夾中包含了圖像的代碼應該是這樣的文件夾：

<a href="page-profile.html" class="instructor-avatar"> 
    <img src="UniLearn/UniLearn (with Options Panel)/img/saif1.jpg" alt=""> 
</a>

（文件夾UniLearn旁邊的.html頁面）

如果.html文件位於不同的文件夾中，則需要跳轉到最近的常用文件夾並指向圖像代碼，如下所示：
```
<a href="page-profile.html" class="instructor-avatar"> 
    <img src="../../UniLearn/UniLearn (with Options Panel)/img/saif2.jpg" alt=""> 
</a> 
```
（。html在遠離UniLearn的路徑中有兩個級別）

- >（../ ..）表示文件夾結構中的兩個級別。

希望這可以幫助

來源

2017-07-17 08:02:11

非常感謝 –

我認爲這個問題是在你的目錄名空間中。嘗試從其他目錄拍照，然後你會看到有什麼問題。

來源

2017-07-17 07:00:02

我也試過，也.. –

問題在於間距。如果你想保持命名（不推薦），仍然使用圖像試試這個：

<img src="UniLearn/UniLearn%20(with%20Options%20Panel)/img/saif.jpg" alt="">

來源

2017-07-17 07:01:20 Svidlak

我試過這個，這絕對扭曲了結構 –

，但沒有圖像顯示？ – Svidlak

很難說只有這個信息。

這裏是如何解決這個：

首先取代所有空間與%20這是URL編碼這些字符的方式。

如果仍然存在問題（通常是瀏覽器自動網址編碼），請比較您用於訪問網站的URL，base標記中的href（如果有）以及圖像的網址。瀏覽器將一起使用這3個找出最終的URL ...

你可以右擊圖片，並在新標籤中打開。它將允許您快速查看用於指向圖片的URL並允許您進行更改。

此外，由於您在unix機器上，因此情況非常重要。確保所有的首都應該存在。

來源

2017-07-17 07:04:49 Salketer

儘管在html中給出了正確的路徑，但沒有正確查找圖像源

回答

相關問題