如何将<Input>标签放入<img>标签中
如何将<Input>标签放入<img>标签中
提问于 2018-08-08 08:17:12
我只想知道如何将标签放在中，这样当我单击图像时，标签就会被激活。我使用的是angular 4和bootstrap 4。这是我的代码：
<input type="file" class="css-1u2oed9 eehmg7h4" (change)="onFileChange($event)" #fileInput>
<img
data-src="holder.js/200x200"
class="rounded mx-auto d-block"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164e3f66702%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164e3f66702%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true"
style="width: 150px; height: 150px; margin:5px;">TypeScript方法组件：
onFileChange(event) {
this.loading=true;
let reader = new FileReader();
if(event.target.files && event.target.files.length > 0) {
this.photo = event.target.files[0];
reader.readAsDataURL(this.photo);
reader.onload = (event: any) => {
this.image=event.target.result;
console.log(this.image);
}
}
}我提醒您，我想要的是单击图像，并且我可以在文件系统中选择另一个图像来更改它。
非常感谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-08 08:24:59
问:如何将img标记放在输入标记内？
答:你不需要。这不是合法的HTML！
但是，您可以将两者都放在<div>标记中，以便图像在视觉上与您的输入标记相关联。
例如：
Replace input type=file by an image
HTML：
<div class="image-upload">
<label for="file-input">
<img src="placeholder.jpg"/>
</label>
<input id="file-input" type="file"/>
</div>CSS：
.image-upload > input
{
display: none;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51737022
复制相关文章
相似问题