Question

我已经将HTML页面转换为ASP.NET CORE 2.1 MVC App，并且正在通过ajax请求加载页面。发出ajax请求时，页面会加载但没有图像。请查看我的代码并帮助我解决此问题。

最好的问候

我创建了一个名为_PublicLayout.cshtml的共享布局（主布局）。在body标签中，我正在渲染页面。在body标记的结尾，我有代码JQuery AJAX函数-请求其他页面。页面已成功加载，但没有图像。

 

@{
    Layout= "_Layout.cshtml";
}
<html>
    <head>
    </head>

    <body>

  <main id="content" role="main">
@RenderBody()
@await Html.PartialAsync("_Footer")
  </main>



<script>
var BASE_URL = "https://localhost:5001"; 

  $('.link').click(function(){
    var href= $(this).attr('href');
    var url = BASE_URL+href;

$.get(url,function(page){
  $('#content').load(page); 
  $(document).scrollTop();
  $('#content').css('top', screenTop);
});

    return false;
  });
</script>
    </body>
</html>

@{
    Layout= "_Layout.cshtml";
}
<html>
    <head>
    </head>

    <body>

  <main id="content" role="main">
@RenderBody()
@await Html.PartialAsync("_Footer")
  </main>



<script>
var BASE_URL = "https://localhost:5001"; 

  $('.link').click(function(){
    var href= $(this).attr('href');
    var url = BASE_URL+href;

$.get(url,function(page){
  $('#content').load(page); 
  $(document).scrollTop();
  $('#content').css('top', screenTop);
});

    return false;
  });
</script>
    </body>
</html>

这是需要通过AJAX请求加载图片的页面。



@{
    Layout = "_PublicLayout";
    ViewData["Title"] = "About";
}

    <!-- Item -->
        <div class="cbp-item">
          <div class="cbp-caption">
            <a class="cbp-lightbox u-media-viewer" href="/img/1920x1920/img1.jpg" data-title="Front in frames - image #01">
              <img class="img-fluid rounded" src="/img/500x805/img1.jpg" alt="Image Description">
              <span class="u-media-viewer__container">
                <span class="u-media-viewer__icon">
                  <span class="fas fa-plus u-media-viewer__icon-inner"></span>
                </span>
              </span>
            </a>
          </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item">
          <div class="cbp-caption">
            <a class="cbp-lightbox u-media-viewer" href="/img/1920x1080/img27.jpg" data-title="Front in frames - image #02">
              <img class="img-fluid rounded" src="/img/380x227/img1.jpg" alt="Image Description">
              <span class="u-media-viewer__container">
                <span class="u-media-viewer__icon">
                  <span class="fas fa-plus u-media-viewer__icon-inner"></span>
                </span>
              </span>
            </a>
          </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item">
          <div class="cbp-caption">
            <a class="cbp-lightbox u-media-viewer" href="/img/1920x1920/img16.jpg" data-title="Front in frames - image #03">
              <img class="img-fluid rounded" src="/img/380x360/img23.jpg" alt="Image Description">
              <span class="u-media-viewer__container">
                <span class="u-media-viewer__icon">
                  <span class="fas fa-plus u-media-viewer__icon-inner"></span>
                </span>
              </span>
            </a>
          </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item">
          <div class="cbp-caption">
            <a class="cbp-lightbox u-media-viewer" href="/img/1920x1080/img4.jpg" data-title="Front in frames - image #04">
              <img class="img-fluid rounded" src="/img/380x227/img2.jpg" alt="Image Description">
              <span class="u-media-viewer__container">
                <span class="u-media-viewer__icon">
                  <span class="fas fa-plus u-media-viewer__icon-inner"></span>
                </span>
              </span>
            </a>
          </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item">
          <div class="cbp-caption">
            <a class="cbp-lightbox u-media-viewer" href="/img/1920x1080/img25.jpg" data-title="Front in frames - image #05">
              <img class="img-fluid rounded" src="/img/380x360/img24.jpg" alt="Image Description">
              <span class="u-media-viewer__container">
                <span class="u-media-viewer__icon">
                  <span class="fas fa-plus u-media-viewer__icon-inner"></span>
                </span>
              </span>
            </a>
          </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item">
          <div class="cbp-caption">
            <a class="cbp-lightbox u-media-viewer" href="/img/1920x1080/img21.jpg" data-title="Front in frames - image #06">
              <img class="img-fluid rounded" src="/img/380x360/img22.jpg" alt="Image Description">
              <span class="u-media-viewer__container">
                <span class="u-media-viewer__icon">
                  <span class="fas fa-plus u-media-viewer__icon-inner"></span>
                </span>
              </span>
            </a>
          </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item">
          <div class="cbp-caption">
            <a class="cbp-lightbox u-media-viewer" href="/img/1920x1080/img26.jpg" data-title="Front in frames - image #07">
              <img class="img-fluid rounded" src="/img/380x227/img3.jpg" alt="Image Description">
              <span class="u-media-viewer__container">
                <span class="u-media-viewer__icon">
                  <span class="fas fa-plus u-media-viewer__icon-inner"></span>
                </span>
              </span>
            </a>
          </div>
        </div>
        <!-- End Item -->
      </div>
      <!-- End Content -->
    </div>
    <!-- End Frames Section -->

注意：
带有图像的页面可以通过直接请求很好地加载。但是问题出在请求中。

通过.NET Core 2.0中的Ajax请求加载没有图像的页面

0 个答案: