Я не получаю изображения при динамической вставке URL в JSS для backgroundImage. Реагируйте, материал-интерфейс - PullRequest
Новая
       43

Я не получаю изображения при динамической вставке URL в JSS для backgroundImage. Реагируйте, материал-интерфейс

0 голосов
/ 25 апреля 2020

Я могу получить статически отображаемое изображение, импортировав его и используя переменную в useStyles, как в следующем фрагменте: 

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { Box } from '@material-ui/core'
import Image from '../../Images/Shanghai.png'

const useStyles = makeStyles(img => ({
  image: {
    backgroundImage: 'url('+ image +')',
    backgroundPosition: 'center',
    width: '100%',
    height: '10rem',
    backgroundSize: 'cover'
  }
}))

const ImageHeader = props => {
const img = props.img
const classes = useStyles(img)

return <Box sm={12} className={classes.image} />
    }

export default ImageHeader

, но когда я пытаюсь использовать динамический c подход, подобный так: 

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { Box } from '@material-ui/core'

const useStyles = makeStyles(img => ({
  image: {
    backgroundImage: 'url(' + img + ')',
    backgroundPosition: 'center',
    width: '100%',
    height: '10rem',
    backgroundSize: 'cover'
  }
}))

Изображение не отображается, и я получаю это значение: 

 backgroundImage: url([object object])

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 25 апреля 2020

Согласно документам :

UseStyles. Он принимает один аргумент: свойства, которые будут использоваться для «интерполяции» в таблице стилей.

В основном, аргумент в makeStyles callback представляет ваш theme, который является объектом. Чтобы использовать аргумент, переданный useStyles в обратном вызове makeStyles, необходимо использовать подход обратного вызова для свойства backgroundImage. 

...
const useStyles = makeStyles(theme => ({ // <---------- theme is an object
  image: {
    backgroundImage: (image) => 'url('+ image +')', // <---------- like this
    backgroundPosition: 'center',
    width: '100%',
    height: '10rem',
    backgroundSize: 'cover'
  }
}))

const ImageHeader = props => {
const img = props.img
const classes = useStyles(img)
...
...