尽管在html中提供了正确的路径,但仍未正确查找图像源

时间:2017-07-17 06:55:42

标签: javascript html css

我遇到了问题。我之前在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 \ Main Files \ UniLearn \ UniLearn(带选项面板)\ img

4 个答案:

答案 0 :(得分:0)

我认为问题出在您的目录名称空间中。 尝试从其他目录拍照然后你会看到问题是什么。

答案 1 :(得分:0)

问题在于间距。如果你想保留命名(不推荐)并仍然使用图像,试试这个:

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

答案 2 :(得分:0)

很难说只有这些信息。

以下是解决此问题的方法:

首先用%20替换所有空格,这是对这些字符进行url编码的方法。

如果仍然存在问题(通常是浏览器自动网址编码),请比较您用于访问网站的网址,base标记中的href(如果有)以及图片的网址。浏览器将使用这三个来计算最终的URL ...

您可以右键单击图片,然后在新标签页中打开。它将允许您快速查看用于指向图片的URL,并允许您进行更改。

此外,由于您使用的是unix机器,因此案例非常重要。确保所有大写都在。

答案 3 :(得分:0)

兄弟,我认为问题出在路径上,你有三个选择基于你的HTML页面位置: -

  • 如果.html文件与图像位于同一文件夹中,则代码应如下所示:

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

(.sif.jpg旁边的.html页面)

  • 如果.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两个级别的路径中)

- &gt;(../ ..)表示在文件夹结构中上升两级。

希望这会有所帮助