How to pass in variable within string field in Typscript

Question

I am trying to show different background images depending on an image id:

var url = "/lectures/" + id +"/thumbnail.jpg";
...
style={{
          backgroundImage: "url({url})",
        }}
...

For example, if the id was 1, I would have backgroundImage: "url('/lectures/1/thumbnail.jpg')" I have tried this, and the image displays correctly. However, I want to display a different image depending on the id. It seems that using {} does not work since the field itself (backgroundImage) takes in a string.

Does this answer your question? How to perform string interpolation in TypeScript? — jtbandes
– jtbandes, Commented Aug 11, 2023 at 1:54

Nikhil G · Accepted Answer · 2023-08-11 01:44:05Z

2

var url = "/lectures/" + id + "/thumbnail.jpg";

// Inside your JSX component
<div
  className="your-container-class"
  style={{
    backgroundImage: `url(${url})`, // Use backticks to interpolate the url variable
  }}
>
  {/* Your content */}
</div>

answered Aug 11, 2023 at 1:44

Nikhil G

2,50617 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hemantha Wanniarachchi · Accepted Answer · 2023-08-15 02:10:53Z

1

The way you have accessed the variable is incorrect. Try it like this

style={{ backgroundImage: url(${url}),// Use backticks to interpolate the url variable

}}

edited Aug 15, 2023 at 2:10

answered Aug 11, 2023 at 2:13

Hemantha Wanniarachchi

238 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to pass in variable within string field in Typscript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related