时间戳

首页 > 解决方案 > Django 项目中的图像仅在 img src='/media/...' 不使用 img src='127.0.0.1/media...' 时可见

python - Django 项目中的图像仅在 img src='/media/...' 不使用 img src='127.0.0.1/media...' 时可见

问题描述

我正在 youtube 上关注本教程系列，我已经接近第一个视频的结尾，但遇到了一些困难。

代码可以在这里找到。

基本上，管理页面允许用户创建一个带有图像的虚拟项目。此图像与服务器 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 中的 Image 调用

<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>

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

标签： pythondjangoreactjsdjango-rest-frameworkdjango-views

解决方案

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

您应该使用您希望 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)

推荐阅读