如何将图像组件从下一个/图像放置到位：绝对

Posted 2023-03-06

【中文标题】如何将图像组件从下一个/图像放置到位：绝对

【英文标题】：How put a Image component from next/image in position: absolue

【发布时间】：2021-06-13 01:37:12

【问题描述】：

我可以在 position: absolute; left: 50% 中放入来自“下一个/图像”的元素图像吗？ 好像不受影响。

例子：

import React from 'react'
import Image from 'next/image'
import styled from 'styled-components'

const Container = styled.div`
  position: relative;
`

const Test = styled(Image)`
 position: absolute;
 left: 50%;
`

const Page: React.FC = () => 
  return (
    <Container>
      <Test srcsomeImg.webp width=500 height=500 objectFit="none" />
    </Container>
  )


export default Page;

【问题讨论】：

检查你是如何给出 src 的。它的语法无效

这是真的，我只是制作这段代码来尝试展示我如何尝试制作它...请忽略 (someImg.webp)

【参考方案1】：

将您的图像放在您喜欢的位置的另一个父 div 中。 在你的情况下：

import React from 'react'
import Image from 'next/image'
import styled from 'styled-components'

const Container = styled.div`
  position: relative;
`
 const ImageContainer = styled.div`
  position: absolute;
  left: 50%;
`


const Page: React.FC = () => 
  return (
    <Container>
     <ImageContainer>
        <Image srcsomeImg.webp width=500 height=500 objectFit="none"/>
     </ImageContainer>
    </Container>
  )


export default Page;

【讨论】：

谢谢我的朋友！你拯救了我的一天