Блог

Главная - Вопросы по программированию - не удается загрузить изображение из папки assets в angular

не удается загрузить изображение из папки assets в angular

#javascript #html #angular

#javascript #HTML #angular

Вопрос:

У меня большая проблема. Я не могу загрузить изображение на холст из папки assets в angular.

html-код

 <div class="container-fluid">
    <div class="row">
        <div class="col-md-8 canvas-viewer">
            <canvas width="240" height="297" style="border:1px solid #d3d3d3;" id="crfCanvas" #crfCanvas></canvas>
        </div>
        <div class="col-md-4 canvas-anno">

        </div>
    </div>
</div>

component.ts код

 export class CanvasComponent implements OnInit {

  @ViewChild("crfCanvas", { static: true }) crfCanvas: ElementRef;
  constructor() { }

  ngOnInit() {
    let canvas = this.crfCanvas.nativeElement;
    let ctx = canvas.getContext("2d");
    let img = new Image();
    img.src = "../../assets/aCRF-PRV111_CLN-001 v1.4-images/aCRF-PRV111_CLN-001 v1.4-blank_0.jpg";
    ctx.drawImage(img, 10, 10, 250, 250);
  }

}

Комментарии:

1. Можете ли вы опубликовать свой файл angular.json?

2. хорошо, я добавлю к вопросу

3. Также проверьте путь к файлу изображения в src

4. @Niladri, не удается опубликовать файл angular.json, в нем 120 строк кода.,

5. Вы можете опубликовать только assets раздел

Ответ №1:

Необходимо учитывать несколько вещей:

  1. ViewChild привязывается к представлению, поэтому лучше дождаться завершения инициализации представления (используйте хук ngAfterViewInit), но ngOnInit также будет работать (просто, если вам в будущем понадобится учитывать смещения и т.д. Для рисования На canvas, Это может вас укусить 🙂

  2. Загрузка изображения выполняется асинхронно, вам необходимо использовать onload hook, прежде чем пытаться нарисовать изображение

  3. Используйте URL-адреса «/assets / ..», чтобы избежать проблем

Обновленный код:

 export class CanvasComponent implements OnInit {

  @ViewChild("crfCanvas", { static: true }) crfCanvas: ElementRef;

  constructor() { }

  ngAfterViewInit() {
    let canvas = this.crfCanvas.nativeElement;
    let ctx = canvas.getContext("2d");
    let img = new Image();
    img.src = "/assets/aCRF-PRV111_CLN-001 v1.4-images/aCRF-PRV111_CLN-001 v1.4-blank_0.jpg";
    img.onload = () => {
        ctx.drawImage(img, 10, 10, 250, 250);
    }
  }

}

Стекблитц: https://stackblitz.com/edit/angular-v5tqbn