Django 前端渲染图片路径问题解决方案

发布时间:2020-09-21 浏览量: 412 文章分类: python

在写Django项目的时候,按照正常的思路只要在图片路径中写入从数据库取出的上传图片地址即可,但是在实际项目中发现了一个问题,就是页面地址的图片一直显示不出来。通过查看页面的代码发现了问题,做一个备忘,也给遇到问题的同学一个解决方案。(如果你有更好的办法也可以告诉我。谢谢)

问题重现

....一些遍历循环渲染代码
<img src="{{ article_obj.cover_bg_img }}"  alt="{{ article_obj.article_name }}">
....

实际页面中,除了首页可以正确显示图片外,其余页面显示均出错,图片都打不开了。 在查看网页的源代码的时候发现因为图片这些我存的路径是media,而在settings我也都设置了对应的路径并没有问题。 真正出问题的地方其实并不是django本身,而是因为我们的图片使用了相对路径。所以会出现下面的问题 比如我在首页127.0.0.1打开图片,那么图片的路径就是127.0.0.1/media/xxxxx..jpg这样是没有问题的,图片可以正确显示。 但是我现在假如切换到文章列表页面,地址变成了127.0.0.1/article-list/那么在这个页面打开的时候,就出问题了,在查看源代码后,发现图片的地址变成了127.0.0.1/article-list/media/xxxx.jpg,所以造成图片的路径不对,所以就打不开了。

解决方案

既然已经找到了问题,那么就很好解决了。 首先在urls的时候,我们需要给链接一个name来指定一下地址的名称,特别是首页

    path('',index.IndexView.as_view(),name='index'),

然后在模板中的图片路径就可以用下面的方式来写了

<img src="{%url 'index' %}{{ article_obj.cover_bg_img }}"  alt="{{ article_obj.article_name }}">

然后重新启动项目你就会发现,大功告成,也就是将图片的相对路径切换到了绝对路径