angular - 怎么放标签内标签
问题描述
我只是想知道如何将标签放入其中,以便当我单击图像时标签被激活。我正在使用 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);
}
}
}
我提醒您,我想要的是单击图像,并且可以在文件系统中选择另一个图像来更改它。
非常感谢!
解决方案
问:如何将 img 标签放在输入标签内?
答:你不会。那不是合法的HTML!
但是,您可以将两者都放入<div>
标签中,以便图像在视觉上与您的输入标签相关联。
例如:
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;
}
推荐阅读
- python - 如何限制 django lamba 查询中的响应大小
- html - CSS Grid 元素在容器外扩展
- json - 从 JSON 字典 Pyspark 创建非透视结构
- bash - 在 bash 中完成多个代码构建时如何显示和停止执行?
- c# - 布雷泽。Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 已添加具有相同键的项
- react-native - 使用钩子在 React Native 中获取视图尺寸
- c# - 从 appsettings.json 到 Entity Framework .NET Core 中的 OnConfiguring 方法的连接字符串
- python - 删除 Openpyxl 中的自动分页符
- gcc - 从构建场中构建的可执行文件的 .gcda-s 和本地构建的 .gcno-s 生成覆盖范围
- mongodb - 查询每个文档具有不同限制的最后一个文档