我正在使用在线模板来使用我的项目。当我运行我的应用程序时，我的模板运行良好。
问题是当我给出一个路径去我的应用程序的另一个页面时，例如（area/controller/action）然后它没有在我的视图页面上显示我期望的任何图像。
这是我的 _Layout 页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>@ViewData["Title"] - UBC</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only"
asp-fallback-test-property="position"
asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
/>
</environment>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:400,600"
/>
<link rel="stylesheet" href="~/theme1/css/all.min.css" />
<link rel="stylesheet" href="~/theme1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="~/theme1/slick/slick.css" />
<link
rel="stylesheet"
type="text/css"
href="~/theme1/slick/slick-theme.css"
/>
<link rel="stylesheet" href="~/theme1/css/templatemo-style.css" />
</head>
<body id="servicesPage">
<div
class="parallax-window"
data-parallax="scroll"
data-image-src="theme1/img/1.jpg"
>
<div class="container-fluid">
<div class="row tm-brand-row">
<div class="col-lg-4 col-11">
<div class="tm-brand-container">
<i class="fas fa-4x fa-pen tm-brand-icon"></i>
<div class="tm-brand-texts">
<h1 class="text-uppercase tm-brand-name text-light big-stone">
UBC
</h1>
<p class="small text-light">We Bring The Best For You</p>
</div>
</div>
</div>
<div class="col-lg-8 col-1">
<div class="tm-nav">
<nav
class="navbar navbar-expand-lg navbar-light tm-bg-white-transparent text-dark"
>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<div class="tm-nav-link-highlight"></div>
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<div class="tm-nav-link-highlight"></div>
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<div class="tm-nav-link-highlight"></div>
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<div class="tm-nav-link-highlight"></div>
<a class="nav-link" href="testimonials.html"
>Testimonials</a
>
</li>
<li class="nav-item green-highlight active">
<div class="tm-nav-link-highlight"></div>
<a
class="nav-link"
asp-action="Index"
asp-controller="Home"
>Contact <span class="sr-only">(current)</span></a
>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!-- Testimonials header -->
<section class="row" id="tmServices">
<div class="col-12">
<div
class="parallax-window tm-services-parallax-header tm-testimonials-parallax-header"
data-parallax="scroll"
data-z-index="101"
data-image-src="img/people.jpg"
>
<div
class="tm-bg-black-transparent text-center tm-services-header tm-testimonials-header"
>
<h2
class="text-uppercase tm-services-page-title tm-testimonials-page-title"
>
The University Of British Columbia
</h2>
<p class="tm-services-description mb-0 small">
Number One University Of The Whole World
</p>
</div>
</div>
</div>
<div class="col-12">
<div class="tm-bg-black-transparent tm-services-detail-box">
<p>
Aenean convallis justo purus, id pulvinar enim finibus vitae.
Fusce et bibendum nisi, vitae mollis turpis. Aliquam tellus mi,
maximus vel orci imperdiet, convallis cursus tortor. Donec
sollicitudin metus sit amet nisl rhoncus, id ultrices risus
interdum. Proin mollis nulla nulla, ac cursus enim ornare a.
Cras quis porta lectus. Pellentesque eu ultrices arcu. Proin ac
tristique dui. Praesent mi odio, aliquam ac leo sit amet, dictum
sodales diam.
</p>
<p>
Quisque commodo, orci eget suscipit vestibulum, metus orci
fringilla urna, eget dignissim justo odio sit amet tellus. Morbi
dapibus molestie massa nec congue. Etiam lacinia pretium psuere.
Integer sodales porttitor lobortis. Nam vestibulum vestibulum
lectus non pulvinar. Vivamus eget sapien vitae magna lobortis
rhoncus molestie sit amet est. Fusce ultrices justo vitae
blandit consequat.
</p>
</div>
</div>
</section>
<section class="row tm-contact-row"></section>
<section class="row tm-testimonials-section">
<div class="col-12 tm-carousel">
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="theme1/img/person-1.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Praesent ornare</h3>
<p class="tm-about-description">
Vestibulum semper dolor sed elit mattis placerat cursus sed ac
urna. Mauris eget suscipit purus, id ullamcorper mi. Mauris eu
velit semper turpis semper.
</p>
</div>
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="theme1/img/person-2.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Maecenas Pretium</h3>
<p class="tm-about-description">
Fusce pellenteqeue nunc sed orci mattis mattis. Etiam porttitor
bibendum ligula eu saggittis. Duis lacus mi, tincidunt ut massa
elementum, volutpat.
</p>
</div>
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="theme1/img/person-3.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Nulla Quis Magna</h3>
<p class="tm-about-description">
Donec id ante nulla. Quisque vestibulum dapibus neque. Nam ex
massa, fringilla ac tortor a, porta quismod mi. Maecenas gravida
maximus ultrices.
</p>
</div>
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="img/person-1.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Praesent ornare</h3>
<p class="tm-about-description">
Vestibulum semper dolor sed elit placerat cursus sed ac urna.
Mauris eget suscipit purus, id ullamcorper mi. Mauris eu velit
semper turpis semper.
</p>
</div>
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="img/person-2.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Maecenas Pretium</h3>
<p class="tm-about-description">
Fusce pellenteqeue nunc sed orci mattis mattis. Etiam porttitor
bibendum ligula eu saggittis. Duis lacus mi, tincidunt ut massa
elementum, volutpat.
</p>
</div>
<div class="tm-bg-black-transparent tm-testimonial-box text-center">
<div class="tm-person-img-container">
<img
src="theme1/img/person-3.png"
alt="Image"
class="img-fluid mx-auto"
/>
</div>
<h3 class="tm-about-name tm-uppercase">Nulla Quis Magna</h3>
<p class="tm-about-description">
Donec id ante nulla. Quisque vestibulum dapibus neque. Nam ex
massa, fringilla ac tortor a, porta quismod mi. Maecenas gravida
maximus ultrices.
</p>
</div>
</div>
</section>
<section>
<div class="container tm-bg-black-transparent tm-services-detail-box">
<partial name="_CookieConsentPartial" />
@RenderBody()
</div>
</section>
<!-- Call to Action -->
<section class="row tm-testimonials-cta" id="tmCallToAction">
<div class="col-12 tm-call-to-action-col">
<img
src="theme1/img/call-to-action-3.jpg"
alt="Image"
class="img-fluid tm-call-to-action-image"
/>
<div class="tm-bg-white tm-call-to-action-text">
<h2 class="tm-call-to-action-title">
Vivamus sollicitudin tellus
</h2>
<p class="tm-call-to-action-description">
Maecenas maximus tellus in dolor auctor tristique. Nam hendrerit
posuere laoreet. Aliquam erat volutpat. Nulla eros est,
imperdiet vel feugiat non, ullamcorper mattis nulla.
</p>
<form action="#" method="get" class="tm-call-to-action-form">
<input
name="email"
type="email"
class="tm-email-input"
id="email"
placeholder="Email"
/>
<button type="submit" class="btn btn-secondary">
Get Updates
</button>
</form>
</div>
</div>
</section>
<!-- Page footer -->
<footer class="row">
<p class="col-12 text-white text-center tm-copyright-text">
Copyright © 2020 App Landing Page. Designed by
<a href="#" class="tm-copyright-link">TemplateMo</a>
</p>
</footer>
</div>
<!-- .container-fluid -->
</div>
<script src="~/theme1/js/jquery.min.js"></script>
<script src="~/theme1/js/parallax.min.js"></script>
<script src="~/theme1/js/bootstrap.min.js"></script>
<script src="~/theme1/slick/slick.min.js"></script>
<script>
$(function () {
$(".tabgroup > div").hide();
$(".tabgroup > div:first-of-type").show();
$(".tabs a").click(function (e) {
e.preventDefault();
var $this = $(this),
tabgroup = "#" + $this.parents(".tabs").data("tabgroup"),
others = $this.closest("li").siblings().children("a"),
target = $this.attr("href");
others.removeClass("active");
$this.addClass("active");
$(tabgroup).children("div").hide();
$(target).show();
// Scroll to tab content (for mobile)
if ($(window).width() < 992) {
$("html, body").animate(
{
scrollTop: $("#first-tab-group").offset().top,
},
200
);
}
});
$(".tm-carousel").slick({
dots: true,
infinite: false,
arrows: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 2,
responsive: [
{
breakpoint: 1024,
settings: {
arrows: false,
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true,
},
},
{
breakpoint: 600,
settings: {
arrows: false,
slidesToShow: 1,
slidesToScroll: 1,
},
},
{
breakpoint: 480,
settings: {
arrows: false,
slidesToShow: 1,
slidesToScroll: 1,
},
},
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
],
});
});
</script>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
当我运行我的应用程序时，我的输出是：
当我为我的应用程序提供路由时，我发现了一个意外的输出。
我的所有图片，尤其是背景图片都不见了。有什么解决办法？