I am having trouble displaying a background image on an element in NextJs using Typescript and Tailwind. I do not believe it is a TypeScript issue since I am not receiving any errors or IntelliSense warnings. Below is the code I am working with:
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 (
<div className={classnames("shadow bg-white border border-black")}>
<div className={classnames(`bg-size bg-cover bg-center`)} style={{backgroundImage: `url(${imagedata.src})`}}>
<Image src={imagedata.src} width={150} height={150} alt={imagedata.alt}>
</Image>
<div className={classnames("p-4 h-32 flex items-end text-black")}>
<h3 className={classnames("mb-2")}>Card Title</h3>
</div>
</div>
<div className={classnames("p-4")}>
<p className={classnames("text-grey-600 text-sm)")}>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. </p>
<div className={classnames("mt-4")}>
<a href="#" className={classnames("no-underline mr-4 text-blue-500 hover:text-blue-400")}>Link 1</a>
</div>
</div>
</div>
)
According to Chrome dev tools, when hovering over the element, there is an 'invalid property value' error related to the background-image styling.
Why is this happening and how can I rectify it? Some suggest that importing the image at the beginning might solve the issue, but I am unsure why that would be necessary, especially considering the need for dynamic images based on props.
I came across a Tailwind template on this site that I wish to customize for Next and TypeScript. Background images will likely be required as the project progresses.
I acknowledge that inline styles are useful for succinctly describing specific styling needs, yet many resources within the react community advocate for avoiding inline styling in JSX/TSX files. Using classes, frameworks, or external stylesheets is preferred, although I recognize the challenge of dynamically passing image paths through these methods. This lack of flexibility may necessitate resorting to inline styles to accommodate such dynamic requirements. The scarcity of documentation on this topic adds to my curiosity regarding the rendering issues observed.
Thank you!
EDIT:
The issue was due to whitespaces. Credit goes to aegatlin for pointing this out.
However, despite passing a string as shown below where the syntax successfully loads the icon image, something appears different either due to inline styling or prop passing. Although the solution is simple by renaming folders without spaces.
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 (
<div className={styles.container}>
<Head>
<title> Acme Widgets| FREE TRIAL</title>
<link rel="icon" href="/images/Landing page images/Logo/Logo_D logo.png" />
</Head>
<main className={classnames(`${styles.w99}`)}>
<Infobar>
</Infobar>
{/* top banner */}
<Section imagedata={{src:"/images/Landing page images/Top_banner/Top_banner_face_leaves14690559.jpeg", height:50, width:50, alt:"woman's face"}}>
</Section>
{/* second banner */}
<Section imagedata={{src:"/images/Landing page images/Second_banner/cerreal2_large_1545151190.png", height:50, width:50, alt:"bowl of cereal with fruit"}}>
</Section>
{/* etc */}
</main>
</div>
)
}
This is where the string is passed from. Indeed, they were correct - there are