制作分层网页后图片不显示

Question

我正在使用 python、html、jinja、java 脚本等。在 raspberry pi 供电设备上构建网络应用程序。到目前为止，当我将图像放在我的网页上时，一切正常。但是，当我创建一个使用变量来区分用户配置文件的“分层”网页时，它会破坏我的本地图像引用，这些引用不会加载而是显示它们的标签。但是，使用在线图片作为图片源效果非常好。

代码无效(Python):

@app.route('/adminPortal/<user_id>', methods=['GET', 'POST'])
def adminPortal(user_id):
    print('Admin Portal')
    ...

工作代码（Python）：

@app.route('/adminPortal', methods=['GET', 'POST'])
def adminPortal():
    print('Admin Portal')

不变HTML:

<img src="{{ 'static/oldLady.jpg' }}" alt="Profile Pic Of User" height=200px> <span style="display:inline-block; width: 50px;"></span>
<img src="{{'static/' + avatar + '.png'}}" alt="Picture of Avatar" height=200px> <br>
<img src="https://api.time.com/wp-content/uploads/2021/06/Pills.jpg" alt="Picture of Avatar" height=200px> <br>
<img src="{{'static/Amy.png?' + time}}" width="240" usemap="#amymap" class="unselectclass">

到目前为止，我无法找到任何成功的参考照片的方法，而且我不知道如何以我设置的“分层”系统之外的任何其他方式创建相同的网页基础结构。

Answer 1

URL static/oldLady.jpg 表示“相对于当前页面的目录”。如果您正在渲染 /adminPortal，那么它意味着 /static/oldLady.jpg。如果您正在渲染 /adminPortal/joe，则表示 /adminPortal/static/oldLady.jpg。

解决方案是使用绝对URLs：/static/oldLady.jpg.

制作分层网页后图片不显示

Images Don't Display After Making Layered Webpage

html

python

image

loading-image