浏览器中的图像已损坏

时间:2017-02-09 14:44:44

标签: python html django

浏览器中的图片已损坏。 使用Google的检查元素工具, 我发现我的图像来源就像 <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 %}

我该怎么办?

1 个答案:

答案 0 :(得分:0)

我建议阅读官方文档的静态文件部分

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

编辑:同时检查图像是否确实位于您认为应该存在的目录中。