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>

There is no point in concatenating literals. You can just write a single (template) literal: `\`url(${Background})\`` (no idea if that solve your issue though). — Felix Kling, Mar 11 '19 at 18:33
I get an error when writing ``style={`url(${Background})`} `` I'm sure its wrong but how would it be coded? — brooksrelyt, Mar 11 '19 at 18:41
`style={backgroundImage: 'url(../background.gif)'}` should work just fine. And no, you can't import anything. You can only import exported entities. — tao, Mar 11 '19 at 18:44
It will only work if you get the path right, relative to the URL of the page you're using this code from. I copied your URL wrong. Get it right and it will, most likely, work. If it's not working, "fails to compile" doesn't say much. Can you provide a more descriptive error? — tao, Mar 11 '19 at 18:50
Anyways, even in your example, if `Background` was importable and returned a string, the correct template literal would have been: `style={{background: \`url(${Bakground})\`}}` — tao, Mar 11 '19 at 18:55
@AndreiGheorghiu I see what you mean, this worked perfectly. Thank you — brooksrelyt, Mar 11 '19 at 19:02
I don't know much React, but I believe that, if the image is relative to component's path, you need to [import location into your component](https://stackoverflow.com/questions/37516919/react-router-getting-this-props-location-in-child-components) and use `background: \`url(${this.location}../img/background.gif)\``. That is if you need use it in more than one page and want the path to be relative to the component, not to current route path. I might be missing a slash above, but it should prove the point. — tao, Mar 11 '19 at 19:05

score 2 · Accepted Answer · edited May 21 '23 at 11:24

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.

Message "warning Unexpected string concatenation of literals"

1 Answers1