Я преобразовал HTML-страницы в приложение ASP.NET CORE 2.1 MVC и загружаю страницы с помощью запроса ajax.Когда выполняется запрос ajax, страницы загружаются, но без изображений.Пожалуйста, посмотрите на мой код и помогите мне решить эту проблему.
С наилучшими пожеланиями
Я создал общий макет (основной макет) с именем _PublicLayout.cshtml.В теге body я отображаю страницы.И в конце тега body у меня есть код JQuery AJAX, который запрашивает другие страницы.Страницы успешно загружены, но без изображений.
</p>
<pre><code>@{
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.
</p>
<pre><code>@{
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 -->
ПРИМЕЧАНИЕ:
Страница с изображениями прекрасно загружается при прямых запросах.Но проблема возникает в запросах.