当前位置: 代码迷 >> python >> 浏览器中的图像损坏
  详细解决方案

浏览器中的图像损坏

热度:57   发布时间:2023-06-13 14:26:54.0

浏览器中的图像损坏。 使用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 %}

我该怎么办?

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

在您的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

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

  相关解决方案