使用 DRF 将图像数组作为 JSON 响应发送

Question

我想以 JSON 格式发送图像数组，如下所示：

{"id":1,"timeIntervel":4,"images":["http://127.0.0.1:8000/images/i1.jpg","http://127.0.0.1:8000/images/i2.jpg","http://127.0.0.1:8000/images/i3.jpg","http://127.0.0.1:8000/images/i4.jpg","http://127.0.0.1:8000/images/i5.jpg"]}

我用我的模型的外键尝试了这个。但未能如上得到响应。

模型.py

class slidesModel(models.Model):
    images = models.ImageField(upload_to='')
    def __str__(self):
        return str(self.images.name)

class slideImageArrayModel(models.Model):
    timeIntervel=models.IntegerField()
    images = models.ForeignKey(slidesModel, on_delete = models.CASCADE)
    def __str__(self):
        return str(self.id)

serializer.py

class slideSerializer(serializers.ModelSerializer):
    class Meta:
        model = slidesModel
        fields='__all__'

class slideImgArraySerializer(serializers.ModelSerializer):
    class Meta:
        model = slideImageArrayModel
        fields='__all__'
        depth = 1

views.py

class slidesViewSet(viewsets.ViewSet):
    def retrieve(self, request, pk=None):
        queryset = slideImageArrayModel.objects.all()
        user = get_object_or_404(queryset, pk=1) #it will always sends the first object
        serializer = slideImgArraySerializer(user)
        return Response(serializer.data)

我现有的输出需要一些修改才能实现实际输出：

{
    "id": 1,
    "timeIntervel": 4,
    "images": {
        "id": 8,
        "images": "/images/b1.jpg"
    }
}

我正在 localhost 中对此进行测试，但它没有显示完整的 url。我已经在设置和 urls.py 中包含了 MEDIA_ROOT url

Answer 1

只需在前端部分添加 localhost:8000 即可。 喜欢这段代码

<img src={"http://localhost:8000"+ note.img} alt="" role={'button'} onClick={(e)=> window.open(e.target.src)}/>

这将解决您的问题。