I'm currently facing an issue with my Heroes component.
const UniqueHero = styled.div`
display: flex;
flex-direction: column;
justify-content: flex-end;
background: linear-gradient(to top, #1f1f21 1%, #1f1f21 1%,rgba(25, 26, 27, 0) 100%) , url(${props => props.bgdesktop}) no-repeat top center;
height: 100vh;
background-size: cover;
@media (max-width:1024px) {
background: linear-gradient(to top, #1f1f21 1%, #1f1f21 1%,rgba(25, 26,
27, 0) 100%) , url(${props => props.bgtablet}) no-repeat center top;
}
@media (max-width:480px) {
background:linear-gradient(to top, rgba(31, 31, 33, 1) 2%, rgba(31, 31,33, 1) 5%,rgba(25, 26, 27, 0) 100%) , url(${props => props.bgmobile}) no-repeat center top;
}
`
class UniqueHeroes extends React.Component {
constructor(props) {
super(props);
...
render() {
return (
<UniqueHero
bgdesktop={this.props.bgdesktop}
bgtablet={this.props.bgtablet}
bgmobile={this.props.bgmobile}/>
)}}
Subsequently, I included this component in 'pages/UniqueHero.js':
export default props => {
const unique_hero = props.location.href
? heroCards.find(h => h.name === props.location.href.substring(28))
: heroCards[0]
return (
<Layout>
<UniqueHeroes
bgdesktop={require(`./../images/BG/${unique_hero.name}_Desktop.jpg`)}
bgtablet={require(`./../images/BG/${unique_hero.name}_Tablet.jpg`)}
bgmobile={require(`./../images/BG/${unique_hero.name}_Mobile.jpg`)}
/>
</Layout>
)
}
At present, when I click on various buttons on the Home page, it redirects to different pages that display different background images based on 'name' included in heroes.js (located in constants folder). This setup works fine locally but encounters issues on production due to gatsby not allowing the usage of '{require(./../images/BG/${hero.name}_Desktop.jpg)}'. How can I resolve this problem?