如何在反应js的输入字段中插入图像？答案

【问题标题】：How to Insert an image inside an input field in react js?如何在反应js的输入字段中插入图像？
【发布时间】：2023-03-10 12:26:01
【问题描述】：

.js 文件

     <div className = "num">
    <p >Enter Phone Number <span className='star'>*</span></p>

    <input
      type="tel"
      className="code"
      placeholder="+91"
    />

    <img className='drop' src={drop} alt='drop' />

    <input
      type="tel"
      className="number"
      placeholder="00000 00000"
    />
    </div>

.css 文件

.drop{
  color: #797B86;
  margin-top: 46.5px;
  margin-left:-30px;

如果不给出负值，我无法将其移动到框内。即使将其移动到框内，这两个框之间的空间也会受到干扰。最好的方法是什么？

} 
.star{
  color: #DE1F48;
}

是否可以在样式表中不给出负值？

【问题讨论】：

标签： javascript css reactjs react-redux

【解决方案1】：

您可以用另一个元素包围您的输入和图像，并根据父元素设置图像的位置，如下所示：

.container { 
    position:relative;
    padding:0;
    margin:0;
}
.input { 
    height:20px;
    margin:0;
    padding-left:30px;
}
.image {
    position:absolute;
    bottom:8px;
    left:10px;
    width:10px;
    height:10px;
}

<div class="container">
    <input class="input" type="text" id="input" value>
    <img src="https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/right-forward-arrow-512.png" class="image">
</div>

【讨论】：