浏览器中的图像被破坏
问题描述:
浏览器中的图像被破坏。 使用谷歌的检查元素工具, 我发现我的图片来源是像 <img class="img" src="/image/images/images/xxx.jpeg">
浏览器中的图像被破坏
在我的应用程序,图像是在image(child app)/images/
目录。 因此,我从src中删除了图像并将其更改为src="/image/images/xxx.jpeg"
,但图像仍然被破坏。
我试图在Chrome中的地址栏中写入图像的完整路径(它类似于 file://Users/Desktop/AppName/image/images/xxx.jpeg
),但发生浏览器错误。我在搜索框中写了完整的图像路径,并在我的电脑中指定了图像(就像file://yname/Desktop/xxx.jpeg
),然后图像显示在浏览器中。
所以,我真的不明白如何解决它。
在views.py
,我写了
def upload_save(request):
photo_id = request.POST.get("p_id", "")
if (photo_id):
photo_obj = Post.objects.get(id=photo_id)
else:
photo_obj = Post()
files = request.FILES.getlist("files[]")
photo_obj.image = files[0]
photo_obj.save()
photos = Post.objects.all()
context = {
'photos': photos,
}
return render(request, 'registration/accounts/photo.html', context)
在photo.html,
{% extends "registration/accounts/base.html" %}
{% block content %}
<div class="container">
{% for photo in photos %}
<h2 class="page-header">{{ photos.title }}</h2>
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="/image/images/{{ photo.image }}">
</div>
</div>
<a class="btn btn-primary" href="{% url 'accounts:upload' photo.id %}">UPLOAD</a>
{% endfor %}
</div>
{% endblock %}
我应该怎么办?
答
我建议你阅读官方文档的静态文件部分
https://docs.djangoproject.com/en/1.11/howto/static-files/
在你的settings.py文件,你可能需要设置
STATIC_URL = '/image/'
然后在你的模板,你必须更改图像源以使用您的静态文件指针:
{% load staticfiles %} #put this at the top
<img src="{% static "images/{{photo.image}}" %}"
在浏览器中检查图像源解析到的内容。它应该是像localhost/your_app_name/image/images/image_name
编辑:同时检查图像是否真的在你认为他们应该是目录。
你是如何设置[静态文件](https://docs.djangoproject.com/zh/1.10/intro/tutorial06/)的? – Matthias
你为什么要通过'file://'提供图片? –