在使用js模块的Flask应用中创建一个Javascript图像元素

Question

我正在制作一个flask应用程序，其中页面上的大部分HTML都是由javascript生成的，但是我无法获得存储在我的资产文件夹中的图像。我不确定这是否是Flask问题，简单的图像路径问题，或者可能与我使用JS模块模式有关。

文件树:

app
┣ static
┃ ┣ assets
┃ ┃ ┣ favicon.ico
┃ ┃ ┣ globe.svg
┃ ┃ ┣ icons.svg
┃ ┃ ┣ negative.png
┃ ┃ ┣ neutral.png
┃ ┃ ┗ positive.png
┃ ┣ css
┃ ┃ ┗ style.css
┃ ┣ js
┃ ┃ ┣ modules
┃ ┃ ┃ ┣ api.js
┃ ┃ ┃ ┗ views.js
┃ ┃ ┗ main.js
┃ ┗ .DS_Store
┣ templates
┃ ┣ base.html
┃ ┗ index.html
┣ .DS_Store
┣ __init__.py
┣ models.py
┣ routes.py
┣ secrets.py
┣ sentAn.py
┗ util.py

图像位于assets文件夹中，我在views.js文件

中生成HTMLmy JS code

export default {
generateStoryMarkup: (story) => {
return `
<li>
<div class="card">
<div class="card-body">
<div class ='story-icon-tray'>
<p class='story-score story-score-icon'><img src="../../assets/positive.png" alt="">POSITIVE SCORE</p>

我收到一个"GET/positive.png HTTP/1.1"加载页面时出现404错误。

Answer 1

必须使用这样的静态文件

改变

../../assets/positive.png

{{ url_for('static', filename='assets/positive.png') }}

consulte https://flask.palletsprojects.com/en/1.1.x/tutorial/static/

Answer 2

所以这是一个路径问题。你不能在JS中使用jinja语法，即使它是Flask应用程序的一部分。

generateStoryMarkup: (story) => {
return `
<li>
<div class="card">
<div class="card-body">
<div class ='story-icon-tray'>
<p class='story-score story-score-icon'> 
<img src="static/assets/positive.png" alt=""> POSITIVE SCORE</p>