html - 以 HTML 格式显示上传的图像 - DJANGO
问题描述
我正在尝试在我的 HTML 中显示用户上传的图像。我会设置以下内容:
设置:
MEDIA_URL = '/media/'
MEDIAFILES_DIRS = []
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
将模型中的文件上传到目录:
class Artikel(models.Model):
artikel_pic = models.ImageField(upload_to='assortiment/images/', blank=True, verbose_name="Afbeelding")
网址:
urlpatterns = [
path(r'', include('main.urls')),
path(r'', include('assortiment.urls')),
path('admin/', admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
视图.py:
class AssortimentView(TemplateView):
template_name = "assortiment/assortiment.html"
def get(self, request):
artikel = Artikel.objects.all()
context_artikel = { 'artikel': artikel}
return render (request, self.template_name, context_artikel)
我在管理面板中打开图像时给出的网址:http: //127.0.0.1 :8000/media/assortiment/images/choco_ijs.jpg 它在这里正确显示。
需要显示图像的html代码:
{% for art in artikel %}
<div class="col-sm-2">
<div class="card" >
<img class="card-img-top" src="{{MEDIA_URL}}/images{{ artikel_pic.url }}" alt="{{art.artikel_naam}}">
<div class="card-body">
<h5>{{ art.artikel_naam }}</h5>
<p class="card-text">{{ art.artikel_omschrijving }}</p>
</div>
<div class="row mr-auto">
<div class="col-8">
<button type="submit" href="#" class="btn btn-info" id="button-assortiment-info">info </button>
</div>
<div class="col-4">
<button type="submit" href="#" class="btn btn-primary" id="button-assortiment-add">+</button>
</div>
</div>
</div>
</div>
{% endfor %}
我收到未找到 (304) 错误:“GET /media/assortiment/images/choco_ijs.jpg HTTP/1.1”304
看起来一切都很顺利。无法弄清楚出了什么问题。我试图将 html 文件中的 src 更改为:
<img class="card-img-top" src="{{ artikel_pic }}" alt="{{art.artikel_naam}}">
<img class="card-img-top" src="{{ artikel_pic.url }}" alt="{{art.artikel_naam}}">
<img class="card-img-top" src="/images/{{ artikel_pic.url }}" alt="{{art.artikel_naam}}">
<img class="card-img-top" src="{{MEDIA_URL}}{{ artikel_pic.url }}" alt="{{art.artikel_naam}}">
似乎源没有路由到正确的源。有没有人有一些建议如何正确地做到这一点?
解决方案
在 settings.py 文件中添加这些行
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media/')
并在 html 文件中使用此代码
<img class="card-img-top" src="{{ art.artikel_pic.url }}">
推荐阅读
- mysql - 权限系统上的行锁定问题
- java - 速度找不到方法
- javascript - 递归 .reduce() 输出父数组
- sql-server - 在父/子查询上对 SQL Server 中的父进行分页
- ios - ARKit 重置会话使应用程序崩溃
- javascript - redux-react 错误:动作必须是普通对象
- reactjs - 用于 Web / 服务器端渲染时 React-Native-Vector-Icons 中的错误
- c# - 无法识别的配置部分 entityFramework
- python - 从heroku外部使用kafka-python连接到heroku kafka实例
- python - 每月重新采样 Dataframe 并将每个月的计数存储在新 Dataframe 中,列为 Date 和 Count