i具有一组自定义系统图标(PNG文件(,它们在Android的drabable-xhdpi,drawable-xxhdpi和drawable-xxxhdpi文件夹中。
现在我的问题是当我使用它们时,我应该如何称呼它们?例如,我希望系统选择正确的edit_pencil.png
这是我目前拥有的,我知道这明确定义了我不想要的edit_pencil.png。有人可以帮忙吗?
<img class="addPictureIcon" src="assets/img/drawable-xhdpi/edit_pencil.png"
(click)="selectPicture()"/>
当您使用离子框架时,必须将图像放置在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");
}
}