时间戳

首页 > 解决方案 > 图像未从 Reactjs 中的 Django rest api 显示

javascript - 图像未从 Reactjs 中的 Django rest api 显示

问题描述

我从服务器获得的数据：

[
    {
        "id": 29,
        "name": "atlas",
        "image": "/media/images/images-4.jpeg",
        "price": 67473,
    },
]

在反应：

//...code
console.log(this.props.img); //>>> /media/images/images-4.jpeg
//...code
<img src={this.props.img} alt='image' width='100%'/>
//...

在 Django 中：

我认为django没有问题。我制作了一个模板并尝试显示图像，它起作用了。

那么，如何在 React 中显示图像？

标签： javascriptpythonreactjsdjangodjango-rest-framework

解决方案

Api 仅返回图像的路径。所以在图像链接之前附加基本 url，如下所示

<img src="https://urdomain.com{this.props.img}" alt='image' width='100%'/>

或在 django 中，您必须以图像值发送完整的 url，如下所示

[
    {
        "id": 29,
        "name": "atlas",
        "image": "https://urdomain.com/media/images/images-4.jpeg",
        "price": 67473,
    },
]

所以不需要附加基本网址

 <img src="{this.props.img}" alt='image' width='100%'/>

推荐阅读