Django网页图片加载失败：‘Img属性无关联文件’问题求助

网页无法加载图片，提示The 'Img' attribute has no file associated with it，static目录下已存在images文件夹，项目配置代码如下：

models.py #

class Post(models.Model):
    title = models.CharField(max_length=200, unique=True)
    slug = models.SlugField(max_length=100,unique=True)
    author = models.ForeignKey(User, on_delete= models.CASCADE,related_name='blog_posts')
    updated_on = models.DateTimeField(auto_now= True)
    content = models.TextField()
    created_on = models.DateTimeField(default=timezone.now())
    status = models.IntegerField(choices=STATUS, default=0)
    Img = models.ImageField(null =True, blank = True, upload_to='static/images')

    class Meta:
        ordering = ['-created_on']

    def __str__(self):
        return self.title

urls.py #

from django.contrib import admin
from django.conf.urls import include
from django.urls import path
from portfo import views
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
     path('',  views.firstpage,name='firstpage'),
    path('', include('portfo.urls')),
    path('admin/',  admin.site.urls),
] + static(settings.MEDIA_URL,
                          document_root=settings.MEDIA_ROOT)

settings.py #

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR,"static")
    ]
MEDIA_URL ="/images/"
MEDIA_ROOT=os.path.join(BASE_DIR,'static/images')
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

模板文件 #

{% for post in posts %}
<div class="card mb-4">
    <div class="card-body " style="background-color: #F2F4F3;">
        <img src="{{post.Img.url}}" /> 
        <h2 class="card-title" style="margin-left:40% ;">{{ post.title|capfirst }}</h2>
        <p class="card-text text-muted h6">{{ post.author }} | {{ post.created_on}} </p>
        <p class="card-text">{{post.content|slice:":200" }}...</p>
        <a href="/{{post.slug}}" class="btn btn-primary">Read More </a>

    </div>
</div>
{% endfor %}

解决步骤： #

• 修正ImageField的upload_to路径：当前upload_to='static/images'结合MEDIA_ROOT=static/images，会导致文件被上传到static/images/static/images，路径重复。修改models.py中的Img字段：

  Img = models.ImageField(null=True, blank=True, upload_to='images')
  

  或者直接省略upload_to（文件会直接存在MEDIA_ROOT目录下）：

  Img = models.ImageField(null=True, blank=True)
  

• 处理模板中图片为空的情况：由于Img字段允许为空，直接调用{{post.Img.url}}会在无图片时报错，添加判断逻辑：

  {% if post.Img %}
      <img src="{{post.Img.url}}" />
  {% else %}
      <!-- 可选：添加默认图片或提示 -->
      <img src="/static/images/default.jpg" alt="暂无图片" />
  {% endif %}
  

• 验证文件上传状态：进入Django后台，确认对应Post对象已成功上传图片，且文件存在于MEDIA_ROOT指定的目录中。之前上传的文件因路径错误需重新上传。

• 优化MEDIA配置（可选）：按Django最佳实践，建议将媒体文件与静态文件分离，单独创建media目录：
  修改settings.py：

  MEDIA_URL = '/media/'
  MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
  

  同时models.py的upload_to改为'images'，文件将上传到media/images目录。

• 检查路由顺序：urls.py中两个空路径path('', views.firstpage)和path('', include('portfo.urls'))可能导致路由冲突，建议调整顺序或给firstpage设置特定路径（如path('home/', views.firstpage, name='firstpage')）。

内容的提问来源于stack exchange，提问作者Aryan Khandelwal