单击 Django 中 get api 中的图像 url 时找不到页面错误

Question

我有一个使用 Django Rest Framework 构建的简单 get api。 它从模型 Menu 中获取所有食物项。它由一个图像字段组成。 api 响应成功，我在图像字段中获得了图像 URL，但是当我单击该 url 时，图像未显示在新选项卡中。我做了一些项目，据我所知，它应该在新标签上显示图像。因此，图像不会显示在 Reactjs 中完成的前端中。 目前在 Heroku 中提供的后端。

url类似如下：

https://example.herokuapp.com/api/menus

本地的api响应如下：

当我同时点击 image 和 image_url 时，它显示如下：

我添加了 image_url 只是为了看看它是否有效，但它也不起作用。

我的模特：

class Menus(models.Model):
    category = models.CharField(max_length=50,choices=CATEGORY,default='main courses')
    food_name = models.CharField(max_length=100,blank=True, null=True)
    image = models.ImageField(upload_to='media/pictures',null=True)
    rating = models.FloatField(blank=True, null=True)
    description = RichTextField(blank=True, null=True)
    price = models.FloatField(blank=True, null=True)

我的序列化器：

class MenusSerializer(serializers.ModelSerializer):
    image_url = serializers.SerializerMethodField('get_image_url')    

    def get_image_url(self, obj):
        request = self.context.get('request')
        image_url = obj.image.url
        return request.build_absolute_uri(image_url)



    class Meta:
        model = Menus
        fields = ['category','image', 'image_url','food_name',
                  'description','price','rating']

我的设置：

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles/')
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
django_heroku.settings(locals())

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

我的项目网址：

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

注意：它不适用于本地和实时 api（在 heroku 上）。

更新：

文件夹如下所示：

Answer 1

你需要做的改变是：

settings.py

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

models.py

class Menus(models.Model):
    ...
    image = models.ImageField(upload_to='pictures',null=True)
    ...

设置upload_to 将检查MEDIA_ROOT 之后的位置。 在此处查看文档以获取 FileField 或 ImageField 的 storage。

在模型中使用 FileField 或 ImageField（见下文）需要一些时间 步骤：

1.) 在您的设置文件中，您需要将 MEDIA_ROOT 定义为完整的 您希望 Django 存储上传文件的目录的路径。 （为了性能，这些文件不存储在数据库中。）定义 MEDIA_URL 作为该目录的基本公共 URL。确保 此目录可由 Web 服务器的用户帐户写入。

2.) 将 FileField 或 ImageField 添加到您的模型中，定义 upload_to 选项 指定 MEDIA_ROOT 的子目录用于上传文件。

3.) 将存储在数据库中的所有内容都是文件的路径（相对 到 MEDIA_ROOT）。您很可能希望使用便捷网址 Django 提供的属性。例如，如果您的 ImageField 是 称为 mug_shot，您可以在 带有 {{ object.mug_shot.url }} 的模板。