Ionic3系統圖標

Question

我有自定義系統圖標（png文件）的設置，它們是用於android的drawable-xhdpi，drawable-xxhdpi和drawable-xxxhdpi文件夾。

現在我的問題是，當我使用它們時，我該怎么稱呼它們？ 例如，我希望系統選擇正確的edit_pencil.png

這就是我現在所擁有的，我知道這明確定義了我不想要的edit_pencil.png。 有人可以幫忙嗎？

<img class="addPictureIcon" src="assets/img/drawable-xhdpi/edit_pencil.png" 
(click)="selectPicture()"/>

Answer 1

當您使用離子框架時，您必須將圖像放在src/文件夾中，可能是src/assets/images 。

這些平台文件夾是自動創建的，所以如果你在那里放置任何東西，你就會犯錯。

要調用圖像，它就是

<img src="src/assets/images/edit_pencil.png">

在您的情況下，您正在使用響應式圖像，因此您應該進行一些@media查詢以調用正確的圖像，例如：

<img class="edit-pencil">

CSS

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
  img.edit-pencil {
    content:url("xsmall-edit_pencil.png");
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  img.edit-pencil {
    content:url("small-edit_pencil.png");
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
  img.edit-pencil {
    content:url("medium-edit_pencil.png");
  }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
  img.edit-pencil {
    content:url("large-edit_pencil.png");
  }
}