HTML 图片来源变量

Question

我正在尝试将图像 URL 数组（字符串格式）从 python 应用程序传递到 HTML 网页。在这个 HTML 网页中，我运行一个 Jinja for 循环，我在其中尝试显示一系列图像，这些图像的来源在我传递给 HTML 网页的数组中。但是，图像没有出现。下面是我这次尝试的代码。 imgLinks 是包含我所有图片源url的数组，变量length代表这个数组的长度。

{% for arrayPos in range(length) %}

  <div class="card">
    <div class="container">
      <img src=imgLinks[arrayPos] width=30% height=20%> </img>
    </div>
  </div>

  <br>

{% endfor %}

应某人的要求，这是我的 python 代码。我基本上是从 API 打电话来获取我的信息。

@app.route('/explorelaunches')
def explorelaunches():
    response = requests.get("https://ll.thespacedevs.com/2.0.0/launch/upcoming/")
    jsonResponse = response.json()
    launches = jsonResponse["results"]

    names = []
    startTimes = []
    padNames = []
    descriptions = []
    imgLinks = []

    for launch in launches:

        if (launch['name'] is None):
            names.append("N/A")
        else:
            names.append(launch['name'])

        if (launch['net'] is None):
            startTimes.append("N/A")
        else:
            dateString = launch['net']
            finalDate = parse(dateString).strftime('%B %d, %Y')
            startTimes.append(finalDate)

        if (launch['pad'] is None or launch['pad']['name'] is None):
            padNames.append("N/A")
        else:
            padNames.append(launch['pad']['name'])

        if (launch['mission'] is None or launch['mission']['description'] is None):
            descriptions.append("N/A")
        else:
            descriptions.append(launch['mission']['description'])

        if (launch['image'] is None):
            imgLinks.append("N/A")
        else:
            imgLinks.append(launch['image'])

    return render_template("explorelaunches.html", username=session.get(names=names, startTimes=startTimes, padNames=padNames, descriptions=descriptions, length=len(names), imgLinks=imgLinks)

有什么方法可以完成这个任务吗？提前致谢。

Answer 1

给定一个 URL 列表，您可以直接在 jinja 模板中遍历该列表。我刚刚根据你提供的信息做了一些更正。

{% for image_link in imgLinks%}

  <div class="card">
    <div class="container">
      <img src={{ image_link }} width=30% height=20%> </img> <!--you forgot to put url inside {{...}}-->
    </div>
  </div>

  <br>

{% endfor %}

HTML 图片来源变量

HTML Img Src Variable

html

python

jinja2