如何从Django REST API加载映像以作出反应？

Question

如上所述，我在从Django后端加载图像时遇到问题（fetch工作正常）。我看过其他类似的问题，但遗憾的是，没有一个有用。
这是我的Django代码： 设置.py

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

url.py

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

model.py

class Content(models.Model):
    objects = models.Manager()

    image = models.ImageField(upload_to='None', height_field=None, width_field=None, max_length=None, null=True, blank=True)
    key_line = models.CharField(max_length = 100, null=True)
    body = models.TextField(blank=True, null=True)

我已经通过admin上传了一个名为“eeee.PNG”的图像，我可以看到以JSON格式序列化的数据，如下所示：

[
    {
        "id": 5,
        "image": "/media/None/eeee.PNG",
        "key_line": "key.",
        "body": "blablabla",
    },
]

和我的React代码（提取已成功完成）：

<Container classname="">
     <Row className="">
         <Col className="text-text img-eachcake">{this.props.image}</Col>
         <Col className="text-text img-eachcake" src={this.props.image}></Col>
     </Row>
</Container>

正如你所看到的，我试过两种方法，但都不管用。你认为问题出在哪里？所有其他的props都加载良好。只是图像文件不起作用。

+在检查模式中>；元素，我将该行视为：<div src="/media/None/eeee.PNG" class="text-text img-eachcake col"></div>

Answer 1

问题在于你的图片URL

"image": "/media/None/eeee.PNG",

Django项目所使用的/media之前应该有域或本地主机 比如：

"image": "localhost:8000/media/None/eeee.PNG"

如果您在服务器上运行，这个Django项目localhost:8000应该替换为域

所以问题在于序列化程序数据的方式，您使用了错误的方式序列化数据，因为图像URL并没有根据您的问题进行序列化

使用适当的Django REST框架序列化程序来序列化数据。 https://www.django-rest-framework.org/api-guide/serializers/

Answer 2

尝试添加：

`http://localhost:8000${this.props.image}`

为我工作

Answer 3

试图澄清Neeraj的答案：

• 而不是发送

  “image”：“localhost:8000/media/None/eeee.PNG”

• 尝试：

  “图像”：http://127.0.0.1:8000/None/eeee.PNG"

因为Django会自动重定向到您的媒体文件夹。请记住，IP和端口可能会因项目而异