尝试使用 flask 和 jinja2 在文件夹中显示随机图像，但它当前显示的是不在文件夹中的不同文件

Question

我试图显示我的 static/pics 文件夹中的随机图像，但在这样做时显示的图像不在其中。这是我的 main/routes 页面：

from flask import Blueprint, render_template, redirect, url_for, request
from flask_paginate import Pagination, get_page_args
from app.models import User, Event, Category
import os
import random

main = Blueprint('main', __name__)

imgs = os.listdir('app/static/pics')
imgs = ['pics/' + file for file in imgs]

@main.route('/')
@main.route('/index', methods=['GET', 'POST'])
@main.route('/index/<cat>', methods=['GET', 'POST'])
def index(cat=None):
    page = int(request.args.get('page', 1))
    per_page = 6
    offset = (page - 1) * per_page
    featuredimage = random.sample(imgs, k=1)

    events = Event.query.order_by(Event.title.asc())
    categories = [cat.name for cat in Category.query.all()]
    if cat is not None:
                events = [b.events.order_by(Event.date.asc()) for b in Category.query.filter_by(name=cat)][0]

    events_for_render = events.limit(per_page).offset(offset)
    search =False
    q = request.args.get('q')
    if q:
        search=True
    pagination = Pagination(
        page=page, 
        per_page=per_page,
        offset=offset,
        total=events.count(),
        css_framework='bootstrap3',
        search=search
        )
    return render_template('index.html', events=events_for_render,
    pagination=pagination, categories=categories, title='Home', featuredimage=featuredimage)

这是我 index.html 页面上的部分：

<body>
<div class="car-container">
        <div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
    
    {% for pics in featuredimage %}
        <img src="{{ url_for('static', filename='pics/{{pics}}') }}">
    {% endfor %}
    </div>

当前显示的图片是“/static/pics/%7B%7Bpics%7D%7D” 这不在我的图片文件夹中。

感谢您的帮助。

Answer 1

问题是您应该正确格式化 url，显示的图像"/static/pics/%7B%7Bpics%7D%7D" %7B 指的是 { 而 %7D 指的是 }

试试这个，使用 Javascript 语言，这将有助于格式化 html 中的 img 元素。

for 循环：

{% for pics in featuredimage %}
<script language="JavaScript">
    document.write("<img src={{ url_for('static', filename='pics/"+{{pics}}+"') }}">
</script>
{% endfor %}

尝试使用 flask 和 jinja2 在文件夹中显示随机图像，但它当前显示的是不在文件夹中的不同文件

Attempting to show random image in folder using flask and jinja2 but it currently is showing a different file that isn't in folder

jinja2

flask