【问题标题】：images in Django project only visible when img src='/media/...' not with img src='127.0.0.1/media...'Django 项目中的图像仅在 img src='/media/...' 不使用 img src='127.0.0.1/media...' 时可见
【发布时间】：2020-11-10 08:03:05
【问题描述】：

我在 youtube 上关注 this 教程系列，我的第一个视频快结束了，但遇到了一些困难。

代码可以在here找到。

基本上，管理页面允许用户创建一个带有图像的虚拟项目。此图像与服务器 IP 的路径和图像名称一起保存。 127.0.0.1/media/image.type

它成功地将它存储到媒体文件夹中。但是，当我尝试使用{item.image} 在客户端使用这个存储的图像时，它会使用服务器 IP 和图像名称。但在客户端由于某种原因，它不抓取图像文件。相反，似乎只有'/media/image.type' 成功获取了文件。

这似乎是个问题，因为当网站上线时，我需要使用服务器 IP 来访问和存储图像。否则，我会使用正则表达式或字符串修剪来摆脱图像源的 IP 部分以使其正常工作。

很确定我的媒体文件夹设置正确。

STATIC_URL = '/static/'
MEDIA_URL = '/media/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'build/static')]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

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

ProductList.js 中的我的图像调用

<Item.Group divided>
  {data.map(item => {
    return ( <Item key={item.id}>
      <Item.Image src={item.image}/>
        <Item.Content>
          <Item.Header as='a'>{item.title}</Item.Header>
            <Item.Meta>
              <span className='cinema'>{item.category}</span>
            </Item.Meta>
            <Item.Description>{item.description}</Item.Description>
            <Item.Extra>
            <Button primary floated='right' icon labelPosition="right">
               Add to Cart
               <Icon name='cart plus'/>
            </Button>
            {item.discount_price && <Label>{item.label}</Label>}
            </Item.Extra>
          </Item.Content>
        </Item>
       );
    })}
</Item.Group>

将图像详细信息打印到控制台：

【问题讨论】：

this stackoverflow 问题涉及类似的问题，除了提问者似乎满足于路径中不包含 IP 地址的路径。如果它不是八岁，我会问这个问题的！
从数据库中获取图片需要使用 {{item.image.url}}
{{item.image}} 给了我带有 IP 地址的 URL，然后是图像名称。 {{item.image.url}} 给我未定义。
这并不理想，但我目前的解决方案是基于this answer<Item.Image src={'/media/' + item.image.toString().match(/[^\/?#]+(?=$|[?#])/)[0]} /> 。我想这与图像 URL 的相对路径和绝对路径有关。

标签： python django reactjs django-rest-framework django-views

【解决方案1】：

抱歉耽搁了，但它可能会帮助一些人。

您应该使用您希望 url 开始的 ip 运行服务器。

例如不要作为本地主机运行：

❌python manage.py runserver 0.0.0.0:8000

insted 像这样运行命令：

✅python manage.py runserver 192.168.1.1:8000

更新：

在尝试通过 docker 部署我的 react-django 应用程序后，我注意到这种方法不是解决此问题的最佳方法。

所以过了一会儿我发现你可以在django序列化模型类中修改url。

class PictureSerialiser(serializers.ModelSerializer):

    // you can choose if you want to override the field or to add new field.
    image = serializers.SerializerMethodField('get_image_url')

    class Meta:
        model = {{The Model name}}
        fields = "__all__"

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

【讨论】：