I've looked through some of the other, similar questions on here, but none of the solutions seem to work for me.

I have a class component that represents a cell on a grid, and for each cell, I want there to be a specific background image that is revealed with the cell is hovered. The default component looks like this:

  const Home = () => {
  return (
    <div id="main">
      <Box title='About' svg={ BG1 } />
      <Box title='Work' svg={ BG2 } />
      <Box title='Portfolio' svg={ BG3 } />
      <Box title='Resume' svg={ BG4 } />
    </div>
  );
};

I want to pass SVG components as background images, but can't seem to figure it out. I've imported each background image like this:

import { ReactComponent as BG1 } from './bg1.svg';

In the Box component, I've added state to handle some of the child elements, and the title prop seems to work out well, but the svg prop doesn't seem to work for me:

class Box extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hovered: false,
    };
  }

  hoverOn = e => {
    this.setState({ hovered: true });  

  };

  hoverOff = e => {
    this.setState({ hovered: false }); 
  };

  render() {
    const { hovered } = this.state;
    const style = hovered ? { transform: 'translateY(-20%)', opacity: '.05' } : {};
    return(
      <section onm ouseEnter={this.hoverOn} onm ouseLeave={this.hoverOff}>
        <a>
          <div className="overlay" style={ style }></div>
          <div className="bg" style={{ backgroundImage: `url(${this.props.svg})` }} ></div>
          <div className="innerContent">
            <h2>
              {this.props.title}
            </h2>
          </div>
       </a>
      </section>
    );
  };
};

Whenever I inspect my developmental site, I just see <div class='bg'></div>. Any suggestions?

CodePudding user response：

It's not working because BG1 is being set to the SVG file contents; not a link to the SVG file. I think you can just reference the filename in url("./bg1.svg") and it will expand it at build time. However, that probably won't work when you just pass in the filename as a prop. So - you could put the SVGs into the public folder and do something like this: {process.env.PUBLIC_URL '/img/logo.png'}. Escape hatch doc.

With Vite you can do this: import modelGLB from './static/model.glb?url' to get the URL, but I forget the create-react-app equivalent.