时间戳

首页 > 解决方案 > Django React Image 不会显示

django - Django React Image 不会显示

问题描述

所以我最近试图部署我的网站，我能够让一切正常工作。但是，由于某种原因，图像已损坏。我实际上可以很好地将图像添加到数据库中（可以很容易地添加和更改图像本身）。但是，当我单击链接时，我无处可去，而不是看到图像，只看到每当输入的 URL 不是 API 的一部分时弹出的我的网站部分（没有错误，基本上什么都没有显示）。奇怪的是，上传的图像实际上被添加到我项目中的图像文件夹中，但之后似乎 Django 找不到它们（你可以看到图像在我的图像文件夹的数据库中）。这是我的项目的布局方式，并且：这是我的一些代码：

设置.py

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,'staticfiles')
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'build/static'),
]
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

REST_FRAMEWORK = {
'DEFAULT_AUTHETICATION_CLASSES': [
    'rest_framework.authentication.TokenAuthentication'
]
}

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR),'EZtrade')
TEMPLATES = [
{
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [os.path.join(BASE_DIR,'build')],
    'APP_DIRS': True,
    'OPTIONS': {
        'context_processors': [
            'django.template.context_processors.debug',
            'django.template.context_processors.request',
            'django.contrib.auth.context_processors.auth',
            'django.contrib.messages.context_processors.messages',
        ],
    },
},
]

URLS.PY

urlpatterns = [
path('api-auth/', include('rest_framework.urls')),
path('admin/', admin.site.urls),
path('api/', include('articles.api.urls')),
path('rest-auth/', include('rest_auth.urls')),
path('rest-auth/registration/', include('rest_auth.registration.urls')),
re_path('.*',TemplateView.as_view(template_name='index.html')),
url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT,})
] + static(settings.MEDIA_URL,document_root = settings.MEDIA_ROOT)

API 网址

router = DefaultRouter()
router.register(r'articles', ArticleViewSet, basename='articles')
router.register(r'trade', TradeViewSet, basename='trade')
router.register(r'users', UserDataViewSet, basename='users')
urlpatterns = router.urls + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

模型

class Article(models.Model):
title = models.CharField(max_length=120)
content = models.TextField()
image = models.ImageField(upload_to = 'images', blank=True)
createdBy = models.CharField(max_length=120)
traded = models.BooleanField(default=False)
city = models.CharField(max_length=120)

def __str__(self):
    return self.title

意见.PY

class ArticleViewSet(viewsets.ModelViewSet):
serializer_class = ArticleSerializer
queryset = Article.objects.all()
filter_backends = [DjangoFilterBackend,filters.SearchFilter]
filterset_fields = ['createdBy','traded']
search_fields = ['title']
authentication_classes = (TokenAuthentication,) # Add this line
permission_classes = (IsAuthenticated,)
def get_permissions(self):
    if self.action == 'list' or self.action == 'retrieve':
        return [AllowAny(), ]        
    return super(ArticleViewSet, self).get_permissions() 
def patch(self, request, pk):
    testmodel_object = self.get_object(pk)
    serializer = TestModelSerializer(testmodel_object, data=request.data, partial=True)
    if serializer.is_valid():
        serializer.save()
        return JsonResponse(code=201, data=serializer.data)
    return JsonResponse(code=400, data="wrong parameters")

序列化器.PY

class ArticleSerializer(PatchModelSerializer):
class Meta:
    model = Article
    fields = ('id','title','content','image','createdBy','traded','city')

我尝试了许多不同的东西，但在互联网上找不到类似的东西，因为我在尝试访问图像时什至没有收到错误。我很坚持这一点，所以如果有人能提供帮助，那就太棒了！

标签： djangoreactjsimagedjango-rest-framework

解决方案

您必须使用方法制作另一个序列化程序并像这样传递图像网址

class ArticleSerializer(PatchModelSerializer):
    image_url = serializers.SerializerMethodField('get_image_url')
    class Meta:
    model = Article
    fields = ('id','title','content','image','image_url','createdBy','traded','city')
    def get_image_url(self, obj):
        return obj.image.url

推荐阅读