css - 如何在 React 中处理输入字段中的图像？

Question

我正在使用 Reactstrap 创建一个可重用的组件。我想要做的是在输入字段中显示一个图像，如下所示

发生的事情是这样的

怎么把图片放在前面？？

InputFieldWithImage.js

import {
  Input,
  InputGroup,
  InputGroupAddon,
  InputGroupText,
  Button
} from 'reactstrap';
import { Form, FormGroup } from 'reactstrap';
import Amy from './../../assets/images/Amy.png';
import Image from 'react-bootstrap/Image';

function InputFieldWithImage(props) {
  const [inputType] = useState(props.type);
  const [inputValue, setInputValue] = useState('');

  function handleChange(event) {
    console.log('Input.js');
    // console.log(inputValue);
    setInputValue(event.target.value);
    if (props.onChange) props.onChange(event);
  }
  return (
    <>
      <InputGroup>
        <Input
          type={inputType}
          value={inputValue}
          name="input-form"
          onChange={handleChange}
          class="inputclass"
        />
        <InputGroupAddon addonType="append" >
          <Image
            style={{ width:50, height: 50, marginLeft: -70 }}
            src={Amy}
            roundedCircle
          />
        </InputGroupAddon>
      </InputGroup>
    </>
  );
}
export default InputFieldWithImage;

标签： cssreactjssass

Answer 1

您可以使用 CSS 简单地处理此问题，方法是提供图片“位置：绝对”和输入容器“位置：“相对”。