Гэтсби Динамическое изображение - PullRequest
Новая
       9

Гэтсби Динамическое изображение

0 голосов
/ 07 марта 2019

У меня проблема: это мой компонент Героев 

const Hero = 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 Heroes extends React.Component {
constructor(props) {
    super(props);
...
render() {
    return (
<Hero
bgdesktop={this.props.bgdesktop}
bgtablet={this.props.bgtablet}
bgmobile={this.props.bgmobile}/>
)}}

Затем я добавил этот компонент в 'pages / Hero.js': 

export default props => {
const hero = props.location.href
? heroCards.find(h => h.name === props.location.href.substring(28))
: heroCards[0]
return (
<Layout>
<Heroes
        bgdesktop={require(`./../images/BG/${hero.name}_Desktop.jpg`)}
        bgtablet={require(`./../images/BG/${hero.name}_Tablet.jpg`)}
        bgmobile={require(`./../images/BG/${hero.name}_Mobile.jpg`)}
      />
</Layout>
)
}

Теперь, нажимая на разныеКнопки на главной странице, я перенаправлен на разные страницы, которые принимают разные bg в зависимости от «имени», включенного в heroes.js (находится в папке costants).Он работает на локальном, но не на производстве, и проблема в том, что Гэтсби не позволяет, что '{require (./../ images / BG / $ {hero.name} _Desktop.jpg)}'.Как я могу решить эту проблему?

1 Ответ

0 голосов
/ 07 марта 2019

Я не думаю, что вам нужно require для этого.Почему бы не использовать пропущенную вами опору и запечь ее в виде строкового литерала, который вы вставляете в компонент (без обязательного и вне возврата)? 

const mobilePath = `./../images/BG/${props.bgmobile}_Mobile.jpg`;
const desktopPath = `./../images/BG/${props.bgdesktop}_Desktop.jpg`;

return(
  <Heroes mobile={mobilePath} desktop={desktopPath} />
)

РЕДАКТИРОВАТЬ: часть substring может быть добавлена ​​влибо <Heroes>, прежде чем пропустить опору.Или отфильтровывая реквизит в <Hero> и передавая эту переменную вместо реквизита

...