angular - چگونه تگ <Input> را داخل تگ <img> قرار دهیم

من فقط میخواهم بدانم چگونه میتوانم تگ را داخل یک قرار دهم به طوری که وقتی روی تصویر کلیک میکنم، تگ فعال شود. من از انگولار ۴ و بوتاسترپ ۴ استفاده میکنم. این کد من است:

<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;">

کامپوننت متد تایپاسکریپت:

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 را داخل یک تگ input قرار دهم؟

A: تو نمیکنی. این HTML قانونی نیست!

با این حال، شما میتوانید هر دو را در یک تگ <div> قرار دهید به طوری که تصویر به صورت بصری با تگ ورودی شما مرتبط باشد.

به عنوان مثال:

نوع ورودی=file را با یک تصویر جایگزین کنید

اچتیامال :

<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;
}