How to nest template strings in ES6?

by

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`
}

Leave a Comment