title: Unable to get background images rendering in NextJS React components [solved but unexplained]
body: <p>I'm struggling to render a background image on an element in NextJs using Typescript and Tailwind. I don't think it's a typescript issue as I get no errors or IntelliSense warnings. I have the following code:</p>
  <pre class="lang-js prettyprint-override"><code>var classnames = require('classnames')
  import Image from 'next/image'
  
  interface LandingPageSection
  {
    imagedata: imagedata,
    children?: React.ReactNode
  }
  
  interface imagedata
  {
    src: string,
    width: number,
    height: number,
    alt: string
  }
  
  export default function Section({ imagedata }: LandingPageSection)
  {
  // var styleatt={backgroundImage: `url(${imagedata.src})`}
  
  
    return (
  
  &lt;div className={classnames(&quot;shadow bg-white border border-black&quot;)}&gt;
      &lt;div className={classnames(`bg-size bg-cover bg-center`)} style={{backgroundImage: `url(${imagedata.src})`}}&gt;
        &lt;Image src={imagedata.src} width={150} height={150} alt={imagedata.alt}&gt;
        &lt;/Image&gt;
  
          &lt;div className={classnames(&quot;p-4 h-32 flex items-end text-black&quot;)}&gt;
              &lt;h3 className={classnames(&quot;mb-2&quot;)}&gt;Card Title&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className={classnames(&quot;p-4&quot;)}&gt;
          &lt;p className={classnames(&quot;text-grey-600 text-sm)&quot;)}&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
              ligula eget dolor.
              Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
              mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. &lt;/p&gt;
          &lt;div className={classnames(&quot;mt-4&quot;)}&gt;
              &lt;a href=&quot;#&quot; className={classnames(&quot;no-underline mr-4 text-blue-500 hover:text-blue-400&quot;)}&gt;Link 1&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
    )
  </code></pre>
  <p>Chrome dev tools tells me ==&gt;</p>
  <s>
  <p>element.style {
  background-image: url(./images/Landing page images/Top_banner/Top_banner_face_leaves14690559.jpeg);
  }</p>
  </s>
  <p>on hover  ==&gt; 'invalid property value'.</p>
  <p>Why is it invalid and how can I make it valid? Some people say you have to import the image up top but I don't know why that would be necessary and I can't do that because it has to vary based on props.</p>
  <p>I had found a tailwind template from <a href="http://tailwindtemplates.io/cards/" rel="nofollow noreferrer">this webpage</a> that I want to adapt to Next and TypeScript and I foresee the need for background images as I continue the project</p>
  <p>I understand why that template site uses inline styles, as it's the most concise and complete way to describe what you need to do, but those in the react community online and the educational websites all seem to be fond of inline styling for this particular goal, but inline styling in jsx/tsx or elsewhere is something I want to avoid as much as possible. I'd rather be using classes and frameworks, and external style sheets if I must, but it got me thinking that inline styling might be required in order to have dynamic images that vary based on props. How else would they be able to vary? You can't can't pass a path into a stylesheet dynamically, so this might be the only way to do it, I suppose. But that still doesn't explain why although my code works, this property doesn't render, and there's very little documentation on the subject (which is kinda surprising).</p>
  <p>Thanks!</p>
  <p>EDIT:</p>
  <p>It was the whitespaces. Credit to aegatlin for pointing this out.</p>
  <p>Nevertheless it breaks even though I'm passing in a string as below and the string syntax loads the icon image fine. Something is different, whether it's due to the fact of inline styling or the passing of props, and I'm curious as to what, but the fix is easy enough. Rename the folders to not have spaces.</p>
  <pre class="lang-js prettyprint-override"><code>import Head from 'next/head'
  import Infobar from '../components/Infobar'
  import Section from '../components/Section'
  import styles from '../styles/LandingPage.module.scss'
  var classnames = require('classnames')
  
  export default function LandingPage()
  {
    return (
      &lt;div className={styles.container}&gt;
        &lt;Head&gt;
          &lt;title&gt; Acme Widgets| FREE TRIAL&lt;/title&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/images/Landing page images/Logo/Logo_D logo.png&quot; /&gt;
        &lt;/Head&gt;
        &lt;main className={classnames(`${styles.w99}`)}&gt;
          &lt;Infobar&gt;
          &lt;/Infobar&gt;
  
          {/* top banner */}
          &lt;Section imagedata={{src:&quot;/images/Landing page images/Top_banner/Top_banner_face_leaves14690559.jpeg&quot;, height:50, width:50, alt:&quot;woman's face&quot;}}&gt; 
          &lt;/Section&gt;
  
          {/* second banner */}
          &lt;Section imagedata={{src:&quot;/images/Landing page images/Second_banner/cerreal2_large_1545151190.png&quot;, height:50, width:50, alt:&quot;bowl of cereal with fruit&quot;}}&gt; 
          &lt;/Section&gt;
  
          {/* etc */}
  
        &lt;/main&gt;
  
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>Here's where I'm passing the string in from. is right, there are</p>