微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

HTML Bootstrap Carousel无法加载图片

如何解决HTML Bootstrap Carousel无法加载图片

我尝试了所有解决此问题的方法,但轮播仍然无法在所有幻灯片中加载我要加载的图像。我也检查了图像的文件路径,并且确实匹配。

轮播代码

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="file:///{{ parent }}/public/assets/py_logo.jpg" class="d-block w-100" alt="first slide">
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Nulla vitae elit libero,a pharetra augue mollis interdum.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="file:///{{ parent }}/public/assets/py_logo.jpg" class="d-block w-100" alt="second slide">
            <div class="carousel-caption d-none d-md-block">
                <h5>Second slide label</h5>
                <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="file:///{{ parent }}/public/assets/py_logo.jpg" class="d-block w-100" alt="third slide">
            <div class="carousel-caption d-none d-md-block">
                <h5>Third slide label</h5>
                <p>Praesent commodo cursus magna,vel scelerisque nisl consectetur.</p>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">PrevIoUs</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

在我使用烧瓶时,parent html变量作为parent_dir python变量在主python文件中传递。

parent_dir配置:

absolute_path = abspath('.')
projected_path = join(absolute_path,'templates')
if not isdir(projected_path):
    current_path = join(absolute_path,'src')
    PATH = PureWindowsPath(current_path)
    in_src = True
else:
    current_path = projected_path
    PATH = PureWindowsPath(current_path)
    in_src = False
parent_dir = PATH.joinpath('templates') if in_src else PATH.joinpath('src','templates')
parent_dir = str(parent_dir).replace('\\','/')

parent_dir的Python导入:

from pathlib import PureWindowsPath
from os.path import (
    abspath,join,isdir
    )

*将parent_dir解析为parent的html文件中的位置:

@app.route('/home')
@login_required
def homePage():
    """
    website homepage
    """
    return render_template("homepage.html",parent=parent_dir)

如何解决错误

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。