TypeScript - объект изображения не рисуется с нужным размером - PullRequest
Новая
       39

TypeScript - объект изображения не рисуется с нужным размером

0 голосов
/ 19 октября 2018

У меня странная проблема.Я создаю Image объекты и затем отображаю их в HTML (я использую Ionic), однако, он не показывает размер, который я установил, но когда я печатаю созданный объект, я получаю следующий вывод: 

<img width="1200" height="700" src="http://removed...">

Однако, когда я проверяю HTML-элемент в браузере, это то, что у меня есть: 

<img src="http://removed...">

Кажется, что он изменяет размер, но HTML не показывает реальный размер, потому что все элементы имеютразмер, который я установил, это мой код:

HTML: 

<ion-slides spaceBetween="15" slidesPerView="1.5" zoom="false">
     <ion-slide [class.oculto]="!oculto" *ngFor="let video of lista.videos">
        <button (click)="verVideo(video, lista.nombre)">
           <ion-thumbnail>
            <div *ngIf="video.visto" class="video-visto">
               <ion-chip color="primary">
                  <i class="icon-sm icon-ophthalmology" aria-hidden="true"></i>
                  <span class="label-chip">Visto</span>
               </ion-chip>
            </div>
            <img [src]="video.miniatura.src">
           </ion-thumbnail>
           <p class="titulo-video">{{video.titulo}}</p>
         </button>
      </ion-slide>
 </ion-slides>

SCSS: 

page-videos-explicativos {
  .searchbar-ios {
    width: 98% !important;
    .searchbar-input {
      padding-left: 40px !important;
    }
  }

  .searchbar-md .searchbar-input {
    padding-left: 55px !important;
  }

  ion-searchbar.search.searchbar.searchbar-md,
  ion-searchbar.search.searchbar.searchbar-ios {
    margin-bottom: -2rem !important;
    padding: 0% !important;
  }

  .searchbar-clear-icon.disable-hover.button.button-ios.button-clear.button-clear-ios {
    display: none !important;
  }

  ion-slides ion-slide button {
    padding: 0;
    background: none;
    text-align: left;
  }

  .thumbnail-buscar {
    width: 15rem;
    height: 8rem;
    padding-right: 0;
  }

  .video-visto-busqueda,
  .video-visto {
    position: absolute;
  }

  .video-visto {
    padding: 0.5rem;
    top: 0.1;
    right: 0.5rem;
  }

  .video-visto-busqueda {
    padding: 0.1rem;
    top: 0.9rem;
    left: 7.3rem;
  }

  ion-chip {
    height: 2rem !important;
    padding-right: 1rem;
    i {
      font-size: 2rem !important;
      margin-right: -0.3rem !important;
      padding-left: 1rem !important;
      padding-top: 0.2rem !important;
      padding-right: 1rem !important;
      margin-top: -0.3rem !important;
    }
    .label-chip {
      font-size: 1rem !important;
      margin-top: -0.7rem !important;
      padding-top: 0.15rem !important;
    }
  }

  .oculto {
    display: none;
  }

  ion-icon.icon.icon-md.ion-md-arrow-back,
  ion-slides ion-slide button p,
  ion-label p {
    color: map-get($colors, primary);
  }

  ion-slide {
    margin-right: 15px !important;
    width: 65.3% !important;
  }

  .button {
    object-fit: cover;
  }

  .swiper-slide {
    display: inline;
    padding-top: 0.5rem;
  }
}

Как создать атрибут miniature моегоvideo переменная в теге img HTML: 

this.miniatura = new Image(1200, 700);
this.miniatura.src = "http://removed...";

В чем здесь проблема?Спасибо!

1 Ответ

0 голосов
/ 19 октября 2018

Хорошо, установив значение widht и height в scss с помощью 

ion-thumbnail img {
    width: 1280px !important;
    height: 720px !important;
  }

, оно сработало и получило этот размер в качестве исходного, а затем я могу изменить размер изображения, используя процентное соотношение и основанное на этих пикселях.

...