0

I'm following this tutorial series on youtube and I'm near the end of the first video but have run into some difficulties.

The code can be found here.

Basically the admin page allows the user to create a dummy item with an image. This image is saved with a path of the server IP and the image name. 127.0.0.1/media/image.type

It successfully stores it into the media folder. But when I try to use this stored image on the client side with {item.image} it uses the server IP and image name. But on the client side for some reason, it doesn't grab the image file. Instead only '/media/image.type' seems to successfully get the file.

This seems like a problem because when the website goes live I would need to use a server IP for accessing and storing the image. Otherwise, I'd use a regex or string trim to get rid of the IP part of the image source to get it to work.

Pretty sure my media folder is set up correctly.

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

My Image call inside 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>

Printing of image details to console:

DannyCranfield
  • 1
  • 2
  • [this](https://stackoverflow.com/questions/10776969/images-from-media-file-wont-get-displayed-in-django-template) stackoverflow question touches upon a similar problem, except the questioner seemed content with the path not containing the IP address in the path. I would have asked on that question, if it was not eight years old! – DannyCranfield Jul 21 '20 at 02:06
  • to grab the image from database you need to use {{item.image.url}} – ngawang13 Jul 21 '20 at 04:50
  • {{item.image}} gives me the URL with the IP address then image name. {{item.image.url}} gives me undefined. – DannyCranfield Jul 21 '20 at 17:53
  • It's not ideal but my current solution is based on [this answer](https://stackoverflow.com/questions/27005460/remove-full-url-from-image-path-jquery) ` `. I guess it's something to do with relative and absolute path of the image URL. – DannyCranfield Jul 21 '20 at 23:08

1 Answers1

0

sorry for the delay but it can may help some over pepole.

you should run the server with the ip that you want the url to start with.

for exmple don't run as local host:

❌ python manage.py runserver 0.0.0.0:8000

insted run the command like this:

✅ python manage.py runserver 192.168.1.1:8000

update:

after tring to deploy my react-django app via docker I noticed that this method isn't the optimal way to solve this issue.

so after a while I found that you can modify the url in the django serializer model class.

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)
Yedidya Rashi
  • 1,012
  • 8
  • 18