Я создал пример проекта для отображения изображений из файла XML. По сути, он отображает изображение в качестве фонового изображения как на рабочем столе, так и на мобильном устройстве. Мне нужно отобразить два изображения в представлении рабочего стола и мобильном представлении в качестве фоновых изображений отдельно.
Вот xml-код,
<?xml version="1.0"?>
<paintings>
<cd>
<head>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</head>
<image>https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg</image>
<image_mobile>https://thoughtcatalog.files.wordpress.com/2018/06/flower-puns.jpg</image_mobile>
</cd>
<cd>
<head>posuere lacus in, accumsan nulla.</head>
<image>https://i.ebayimg.com/images/g/SpMAAOSwceNZXpSZ/s-l300.jpg</image>
<image_mobile>https://cdn.britannica.com/s:700x450/45/5645-004-7461C1BD.jpg</image_mobile>
</cd>
<cd>
<head>per conubia nostra, per inceptos himenaeos.</head>
<image>https://pbs.twimg.com/profile_images/883859744498176000/pjEHfbdn_400x400.jpg</image>
<image_mobile>https://www.lumixgexperience.panasonic.co.uk/app/uploads/gallery/AdamTrevor/Flower_HDR.jpg</image_mobile>
</cd>
<cd>
<head>per conubia nostra, per inceptos himenaeos.</head>
<image>https://pbs.twimg.com/profile_images/883859744498176000/pjEHfbdn_400x400.jpg</image>
<image_mobile>http://clipart-library.com/images/6iy5aE5nT.jpg</image_mobile>
</cd>
</paintings>
При этом прикрепил пример того, что было сделано мной.
Plunker- http://next.plnkr.co/edit/LeyIh69Ik3vnZLIn?open=lib%2Fscript.js&preview