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

【问题标题】：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 src{someImg.webp} width={500} height={500} objectFit="none" />
    </Container>
  )
}

export default Page;

【问题讨论】：

检查你是如何给出 src 的。它的语法无效
这是真的，我只是制作这段代码来尝试展示我如何尝试制作它...请忽略 (someImg.webp)

标签： reactjs typescript next.js styled-components nextjs-image

【解决方案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 src{someImg.webp} width={500} height={500} objectFit="none"/>
     </ImageContainer>
    </Container>
  )
}

export default Page;

【讨论】：

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