Question

我正在尝试使用Bootstraps轮播来循环显示一组图像。但是，图像丢失了，页面最后变成空白。

我正在.aspx文件中使用此文件，我担心这是其原因。

目标是在电视上拥有一个仪表板，该仪表板可循环浏览服务器上的图像，这些图像通过单独的后端过程进行更新。

使用chrome dev-tools，看来确实可以正确循环浏览图像。另外，如果我右键单击轮播所在的部分，则可以在新标签页中打开图像，并且该标签页就在其中。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="DisplayMonitors.test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>testy</title>
    <link rel="stylesheet" type="text/css" href="Content/bootstrap.min.css" />
    <style type="text/css">
        body {background-color:#181818 !important;}
    </style>
    <script type="text/javascript" src="Scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
    
</head>
<body>
    <form id="FrmMain" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
            <asp:Timer ID="Timer1" runat="server" OnTick="TV_Refresh" Interval="2000"> </asp:Timer>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" Visible="False">
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                </Triggers>
            </asp:UpdatePanel>
        <h1 class="text-white text-center">Fulfillment Ticket Creation and KPIs</h1>
        <div class="container-fluid">
            <div class="row">
                <div class="col">
                    <img id="overview" src="images/overview.png" />
                </div>
                <div class="col">
                    <div class="row">
                        <div id="metricCarousel" class="carousel fade">
                            <div class="carousel-inner">
                                <div class="carousel-item active"><img class="img-fluid" src="images/metric1.png" /></div>
                                <div class="carousel-item"><img class="img-fluid" src="images/metric2.png" /></div>
                                <div class="carousel-item"><img class="img-fluid" src="images/metric3.png" /></div>
                                <div class="carousel-item"><img class="img-fluid" src="images/metric4.png" /></div>
                                <div class="carousel-item"><img class="img-fluid" src="images/metric5.png" /></div>
                                <div class="carousel-item"><img class="img-fluid" src="images/metric6.png" /></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div id="graphcCarousel" class="carousel fade">
                            <div class="carousel-inner">
                                <div class="carousel-item active"><img class="img-fluid" src="images/graph1.png" /></div>
                                <div class="carousel-item"><img class="img-fluid" src="images/graph2.png" /></div>
                                <div class="carousel-item"><img class="img-fluid" src="images/graph3.png" /></div>
                                <div class="carousel-item"><img class="img-fluid" src="images/graph4.png" /></div>
                                <div class="carousel-item"><img class="img-fluid" src="images/graph5.png" /></div>
                                <div class="carousel-item"><img class="img-fluid" src="images/graph6.png" /></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>



    <script type="text/javascript">
        $('.carousel').carousel({
            interval: 9000
        })
    </script>
</body>
</html>

任何帮助将不胜感激！

Bootstrap Carousel缺少图片

0 个答案: