在Next.js中将图像作为 prop 传递给样式化组件

ca1c2owp 于 2023-05-22 发布在其他

关注(0)|答案(2)|浏览(129)

我试图通过一个图像设置为我的背景下白色样式组件，但导致一个意外的行为。
英雄组件：

import djEventImg from '@/public/images/dj-event.jpg'
import { Hero } from './ShowCase.styles'

const ShowCase = () => {
  return <Hero image={djEventImg}></Hero>
}

export default ShowCase

样式组件：

import styled from 'styled-components'

export const Hero = styled.div`
  // background image props
  background-image: url(${(props) => props.image});
  width: 100;
  height: 300px;
`

next.js

来源：https://stackoverflow.com/questions/69057373/passing-image-as-props-to-styled-components-in-next-js

2条答案

按热度按时间

bjp0bcyl1#

我复制你的代码在我的本地mashine和得到一个图像与此代码

英雄组件：*

import djEventImg from '/public/images/dj-event.jpg'
import { Hero } from './ShowCase.styles'

const ShowCase = () => {
  return <Hero image={djEventImg}></Hero>
}

export default ShowCase

样式化组件：*

import styled from 'styled-components'

export const Hero = styled.div`
  background-image: url(${props => props.image.src});
  width: 100%;
  height: 300px;
  background-repeat: no-repeat;
`;

赞(0）回复(0）举报 2023-05-22

m4pnthwp2#

您可以直接将Icon导入到样式化组件中。见以下答案：

import styled from 'styled-components';
import Image from "./yourImage.png";

export const Hero = styled.div`
  // background image props
  background-image: url(${Image.src});
  width: 100;
  height: 300px;
`

赞(0）回复(0）举报 2023-05-22

我来回答

在Next.js中将图像作为 prop 传递给样式化组件

2条答案

相关问题

热门标签

最新问答