Message "warning Unexpected string concatenation of literals"

Question

I am running into multiple warnings related to an inline style background image. Using React-static, I didn't have any issues, but now with Gatsby I am getting this error:

warning Unexpected string concatenation of literals

If I only wanted to use an inline style, how would I go about coding this?

Right now, I am importing my background image and using an inline style. I would rather import the image and use an inline style instead of creating multiple CSS styles.

Code:

import Background from '../img/background.gif';

<div id="hero" className="header-banner" style={{background: 'url(' + `${Background}` + ')'}}></div>

Answer 1

It looks like you've got it figured out in the comments, and this is just a FYI: the message you're seeing is from ESLint, specifically this rule.

This rule aims to flag the concatenation of 2 literals when they could be combined into a single literal. Literals can be strings or template literals.

So your code is valid. It's either Gatsby's default ESLint setting or your own setting being picky about it. If you don't care for the rule, you can remove it by setting up your own ESLint setting.