将图像作为道具传递给 Next.js 中的样式化组件

Posted 2023-03-15

【中文标题】将图像作为道具传递给 Next.js 中的样式化组件

【英文标题】：Passing image as props to styled components in Next.js

【发布时间】：2021-11-02 12:43:30

【问题描述】：

我正在尝试传递一个图像以在 Next whit Styled Components 中设置为我的背景，但会导致意外行为。

英雄组件：

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;
`

【问题讨论】：

“但导致意外行为” ...什么意外行为？请在问题中添加与问题相关的文本。 PS：很可能您需要通过 djEventImg.src 代替。此外，可以直接提供存储在public 目录中的图像。 [Ref.]所以你甚至不需要导入图像---<Hero image="/images/dj-event.jpg" />

就这么简单，我用 html url(src:/_next/static/image/src/public/images/dj-event.d431960f340929359ffb5934fc6d628a.jpg;height:851px;width:1280px;blur-data-u-r-l:/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fsrc%2Fpublic%2Fimages%2Fdj-event.d431960f340929359ffb5934fc6d628a.jpg&w=8&q=70;)

@RicardodePaula 您是否按照建议尝试过<Hero image="/images/dj-event.jpg" />？它对你有用吗？

我在 Html 中有这个`background-image: url(/images/dj-event.jpg)`，但它仍然不起作用。

我最初评论的最后一部分可能对您无效。查看您生成的 CSS，我相信您的 src 文件夹 (so static file serving from there won't work) 中有 public。试试这个：<Hero image=djEventImg.src />

【参考方案1】：

我在我的本地 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;
`;

【讨论】：

非常感谢！这是我的第一个 Next 项目。在 ReactJS 中，我不需要将 .src 放在最后。