Question

194

How to nest template strings in ES6?

rated 0 times [ 197] [ 3] / answers: 1 / hits: 25464 / 8 Years ago, wed, march 16, 2016, 12:00:00

I got an prefer-template error from eslint. For the workaround, I changed my code to use a template string inside the require function which is nested inside the url function as following:

{

  background: `url(${require(`../../assets/${edge.node.name.toLowerCase()}.png` center no-repeat`)})

}

However, that gave an error, obviously. Here is the code I was using before, a plus sign concatenating inside the require function instead of the template string.

{

  background: `url(${require('../../assets/' + edge.node.name.toLowerCase() + '.png')}) center no-repeat`

}

Would it be possible to define nested template strings?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

isham

Add To Favorites

Follow

Total Points: 69

Total Questions: 86

Total Answers: 86

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

isham questions

1 NodeJS - TypeError: Busboy is not a constructor

Wed, Jan 19, 22, 00:00, 2 Years ago

1 How to pass query parameters to next.js api handler when calling from inside of getStaticProps

Wed, Dec 2, 20, 00:00, 4 Years ago

1 How to display the values from ajax success data to the html table?

Tue, Feb 25, 20, 00:00, 4 Years ago

1 How to set expanded prop for material ui TreeView component conditionally

Tue, Feb 4, 20, 00:00, 4 Years ago

1 Getting Firebase doc.data is undefined

Sun, Dec 1, 19, 00:00, 5 Years ago

View All

answered 8 Years ago blaisep · Accepted Answer

Yes, it's possible, but you had for some reason put the )}) part (that closes the require call, the interpolated value, and the CSS url) in the wrong place:

{

  background: `url(${require(`../../assets/${edge.node.name.toLowerCase()}.png`)}) center no-repeat`

//                                                                             ^^^

}

That said, it's probably a bad idea as it doesn't exactly make the code readable. Better use a variable:

const bgurl = require(`../../assets/${edge.node.name.toLowerCase()}.png`);

… {

  background: `url(${bgurl}) center no-repeat`

}