-1

I m trying to pass host URL like this http://localhost:1337 from one central file to all the image tags in all components. Currently I am able to render my images like this below.

<img
   style={{ height: "212px" }}
   src={`http://localhost:1337${props.data.image1.url}`}
   alt="new"
/>{" "}

Would love to achieve something like this below -

const API_URL = 'http://localhost:1337' //in one random file like .env in NodeJS at root

and all my Image tags get Images from there
Currently doing this way inside one component and it works.

export default function Home(props) {
const API_URL = 'http://localhost:1337';  
return(  
<img
style={{ height: "212px" }}
   src={`http://localhost:1337${props.data.image1.url}`}
   alt="new"
/>{" "})
...rest of the code here
)
}

Currently its throwing error. Something wrong with my Syntax.
Note: My images are in cloud and not in Public Folder which I could reference like process.env.PUBLIC ...

Thanks in advance.

Aditya Shukla
  • 316
  • 1
  • 3
  • 20
  • *"Currently its throwing error. Something wrong with my Syntax."* - What is the exact error and what exact code does it refer to? – David Dec 29 '21 at 12:41
  • Undefined. Running with Strapi. 404 Not Found. "http://localhost:3000/undefined/uploads/wrsg_main_logo_b44ee55d22.svg". It should be "http://localhost:1337/uploads/wrsg_main_logo_b44ee55d22.svg" – Aditya Shukla Dec 29 '21 at 13:21
  • That doesn't appear to be a syntax error. How are you importing `API_URL` into that file? How are you exporting it from the file where it's defined? Also, when you say *"in one random file like .env"* do you mean it's specifically in the `.env` file? That doesn't look like how one would define environment variables. The comment also says *"in NodeJS"*, does that mean this is a **server-side** environment variable? How is React accessing this value? There are a lot of unclear details here. – David Dec 29 '21 at 13:25
  • @David So I have not defined it yet in an .env file like we do in a NodeJS file. I am using React with Strapi CMS. I defined a variable in the in function like this - export default function Club(props) { const STRAPI_BASE_URL = 'http://localhost:1337'; ... I know it does not work that way. Hence trying to figure out the correct way to provide this variable throughout all the components from a central file. – Aditya Shukla Dec 29 '21 at 13:27
  • So you define a `const` called `STRAPI_BASE_URL` and then try to use one called `API_URL`? Those are two different names. You'll need to use the value that was defined. – David Dec 29 '21 at 13:30
  • @David my bad. I did that. It works inside component. Image is coming up. One last thing, is there a way to defined this variable at the root variable so that I can consume it in all my components. Would be really thankful. – Aditya Shukla Dec 29 '21 at 13:36
  • 1
    Well, you could define the `const` in a file of constants somewhere in your code and [export it](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) to be imported anywhere else in your code. Another alternative could be to [use environment variables in React](https://stackoverflow.com/q/49579028/328193). – David Dec 29 '21 at 13:40

1 Answers1

-2
<img
   style={{ height: "212px" }}
   src={API_URL + props.data.image1.url}
   alt="new"
/>

Try this way!

pdchaudhary
  • 378
  • 3
  • 15