I'm currently working on a custom Reactstrap component. My goal is to have an image displayed within the input field, like this: https://i.sstatic.net/2QXEf.png
However, what I am experiencing is not what I expected:
https://i.sstatic.net/WbEeW.png
Any tips on how to bring the image to the forefront?
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;