瀏覽器中的圖像被破壞

瀏覽器中的圖像被破壞。使用谷歌的檢查元素工具，我發現我的圖片來源是像 <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 %}

我應該怎麼辦？

來源

2017-02-09 user7523656

你是如何設置[靜態文件]（https://docs.djangoproject.com/zh/1.10/intro/tutorial06/）的？ – Matthias

你爲什麼要通過'file：//'提供圖片？ –

我建議你閱讀官方文檔的靜態文件部分

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

編輯：同時檢查圖像是否真的在你認爲他們應該是目錄。

來源

2017-02-09 16:08:25

瀏覽器中的圖像被破壞

回答

相關問題