使用 Django 创建网站，但图像在部署到 heroku 时未显示，但在 localhost 中显示

Question

图片来自管理员上传图片的表格：

这些是我存储静态文件和媒体的设置：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'portfolio/static/')

 ]

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,'static')

MEDIA_ROOT = os.path.join(BASE_DIR,'media')
MEDIA_URL = '/media/'
STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'

我创建的模型：

from django.db import models

# Create your models here.
class ProfileImage(models.Model):
    image = models.ImageField(upload_to='images/')

class Job(models.Model):
    image = models.ImageField(upload_to='images/')
    summary = models.CharField(max_length= 200)

class Project(models.Model):
    image = models.ImageField(upload_to='images/')
    summary = models.TextField()
    title = models.CharField(max_length=30)
    link = models.URLField(max_length=200, null=True, blank=True)

    def __str__(self):
        return(self.title)

class Social(models.Model):
    image = models.ImageField(upload_to='images/')
    title = models.CharField(max_length=30)
    link = models.URLField(max_length=200, null=True, blank=True)

    def __str__(self):
        return(self.title)

class Skills(models.Model):
    title = models.CharField(max_length=20)

    def __str__(self):
        return(self.title)

在我有的模板中：

 <img src="{{profile_pic.image.url}}" height="600px" width="500x" class="img-fluid img-thumbnail"
            alt="Responsive image">
          <br>

在我的观点中：

from django.shortcuts import render
from .models import Job, Skills, Project, Social, ProfileImage

# Create your views here.
def home(request):
    jobs = Job.objects.all()
    skills = Skills.objects.all()
    projects = Project.objects.all()
    socials = Social.objects.all()
    profile_pic = ProfileImage.objects.all().first()
    context = {'jobs':jobs, 'skills':skills, 'projects':projects, 'socials':socials, 'profile_pic':profile_pic}
    return render(request, 'jobs/home.html', context)

当我部署到 heroku 时，它显示：

Answer 1

您如何提供静态文件？ Whitenoise 您可以使用它或其他服务（如 google cloud 或 aws）在生产环境中提供静态文件。

以下是 Heroku 在其开发中心关于如何在生产中提供静态文件的内容。 Serve static files on heroku