So what we need to do is basically make it so we can see the images in here when we edit and show it in the newsletter latest component. Let's start with the news letter edit form by basically talking about why it's not working. So we're getting our initial values and it contains a title, body, and image url.

Now our field here is called image, so it's not working if we call it imageUrl then it would map over the input. But we don't want to do that because it would map over to the input not the image.

So let's go into our component the form image and let's look at this. In here we're saying that, we're not even setting the imageUrl so we need to set this imageUrl, so let's uncomment the imageUrl, the src-{imageUrl}. And let's go into our render and provide a prop called imageUrl and what we need to do is provide an imageUrl as a prop now.

So what we need to do is go into newsletterEditForm.js and say on the old imageUrl is equal to and then we do this say imageUrl but not just imageUrl because we need to check the props, we need to say this.props.initialValues.imageUrl

imageUrl={this.props.initialValues.imageUrl}

and then that won't be good enough because of two reasons okay. We need to tell it that it belongs in localhost because right now it's just the filename, it's not saying it belongs anywhere, it's not reaching to a server and we need to see if it even exists right because we might not upload an image for whatever reason to the newsletter.

So let's say imageUrl question mark okay it exists, then let's say yeah we want this .props.initialValue.imageUrl. All right, if we don't have it we'll just say HTTP via.placeholder.com slash and I don't remember the size of it, it was like 150 by 137 or something.

newsletterEditForm.js

<Field
    classname="new-newsletter-form__image"
    small={true}
    name="image"
    type="file"
    title="Image"
    component={FormImage}
    imageUrl={this.props.initialValues.imageUrl ? 
              this.props.initialValues.imageUrl : 
              'http://via.placeholder.com/150x137'}
/>

And then this won't work because we need to basically say it belongs on localhost, so what we need to do is import up here at the very top, we need to say import { ROOT_URL } from '../../config';.

Now, what we need to do is go down here and say basically wrap it with back ticks, and then wrap this.props.initialValues.imageUrl with a javascript object with the dollar sign in front of it, so string interpellation. Then we need to do that again and say ROOT_URL then put a slash in between, and that will work.

newsletterEditForm.js

<Field
    classname="new-newsletter-form__image"
    small={true}
    name="image"
    type="file"
    title="Image"
    component={FormImage}
    imageUrl={this.props.initialValues.imageUrl ? 
              '${ROOT_URL}/${this.props.initialValues.imageUrl}' : 
              'http://via.placeholder.com/150x137'}
/>

Let's go ahead and copy this with the back ticks because we're going to need to use it in our latest component. Let's now go see if this works, let's login, let's hit edit and you'll see it brings up the image.

So what we need to do now is we need to hit cancel and fix this problem, we need to see the image in our Newsletter, let's go into newsletterLatest.js and look at our imageUrl we're just saying src={imageUrl}. We need to change that, we need to basically put in the same exact thing we were putting it in other file.

We need to add in the localhost 3090 in front of it.

newsletterLatest.js

<img className='newsletter-latest__image' src={'${ROOT_URL}/${this.props.initialValues.imageUrl}'}/>

Now the reason we don't just hardcode it in 'localhost:3090' is because we're going to eventually have a dev server right, so we don't want to go through every single source and place and request an action and change it all to the dev server and make conditions there.

We don't want to say hey if it's dev, if dev it's this url if prod this one, right. We want to do that in one place, which is in our config right, speaking of that we're going to have to import it, so let's say import { ROOT_URL } from '../../config';.

Now we're going to have to get rid of this.props.initialValues because we just have access to it directly, it has nothing to do with redux form because it's a different component, and that should work.

newsletterLatest.js

<img className='newsletter-latest__image' src={'${Root_URL}/${imageUrl}'}/>

Now again with the dev url and all that, when we switch to a dev server we just want to change it in one file and that's going to be in our config.js right. We're going to want to say something like if dev then this url then else if prod this url.

config.js

if(dev) {
    export const ROOT_URL = 'http://localhost:3090';
} else if (prod ) {
    thisurl
}

But we are just doing this for now

config.js

export const ROOT_URL = 'http://localhost:3090';

Okay, so that should work let's try it out, let's login and we should see the image right, but it's extremely massive. So what we need to do is we need to figure out how we can get this to not be so big.

Now it's likely that if you're using a different image like the perfect size it's not going to do this but obviously, it's not going to be the perfect size. So what we need to do is somehow make it fit, so let's go ahead and commit our code and do that in the next video.

Terminal

git status
git add .
git commit -m "fixed image url server problems"

Resources

Source code