Dumb beginner question about getting an image in a notification

Hey everyone! Im getting my feet wet with this whole home automation thing and the first thing i wanted to get out of the way was a doorbell notification but i cant for the life of me get it going the way i want. What i have set up;
-Set up my IP camera to generate a jpeg on doorbell event and broadcast an mqtt … thing (not into the lingo yet so please bear with me)
-Set up a mqtt broker server (in docker) to relay the mqtt thing from my camera
-Set up HA (in docker) with mqtt integration configured to listen to this broadcast so i can use it as a trigger
-Installed ios app on my phone
-Made a little super basic yaml file to connect everything together;

alias: Doorbell ring
description: On doorbell event display image in notification on phone
  - platform: mqtt
    topic: voordeur_alert
    id: voordeur_alert
condition: []
action:
  - device_id: xxxxxx
    domain: mobile_app
    type: notify
    title: RING!
    message: Doorbell
mode: single

And this works fine, on doorbell event i get my notification… except that as soon as i try to get any image to show up in the notification everything breaks and i get the most useless yaml errors or the web interface simply doesnt feel like saving or cooperating any longer. I am missing a crucial step in how to manually add stuff like this to my automation file or even where to find the proper way to format all of this. If i see one more ‘Message malformed: extra keys not allowed @ data[‘data’]’ in my life then it will be too soon.

So the actual question; How do i make a jpeg on a network location (that all devices have access to) show up inside this notification? Preferably when i click the notification it opens the image fullscreen (or opens it in browser) instead of opening my home automation app.

Decided to give it another shot today, googled a lot of examples but im only getting weird errors again, i just cant for the life of me figure out the syntax that these yaml files are expecting.

alias: Doorbell ring
description: On doorbell event display image in notification on phone
trigger:
  - platform: mqtt
    topic: voordeur_alert
    id: voordeur_alert
condition: []
action:
  - device_id: xxxxxx
    domain: mobile_app
    type: notify
    title: RING!
    message: Doorbell
      data:
        push:
        attachment:
          url: url/to/jpeg
          content-type: jpg
          hide-thumbnail: false
mode: single

resulting in another beautiful

Message malformed: required key not provided @ data['action']

What is this ‘data’ expecting here exactly and why do these supposedly work fine for other people but break everything when i copy/paste them in my file? Im trying to get my head around this formatting/syntax but honestly dont know where to start.

Started from scratch, gave a different action type a try (call service instead of device) and that action seems to give me none of the weird errors and actually works!

alias: Doorbell event
description: On doorbell event send notification to iphone with image
trigger:
  - platform: mqtt
    topic: voordeur_alert
    id: voordeur_alert
condition: []
action:
  - service: notify.mobile_app_my_iphone
    data:
      message: Ring!
      data:
        push: null
        attachment:
          url: link.to.jpeg
          content-type: jpg
          hide-thumbnail: false
mode: single

You can find the documentation for attachments on the companion site, which also includes a couple suggestions on where to store the file and how to make service calls with images.

Yup, read all of that but nothing on that page actually seems to apply to the ‘device’ action type. All works great for the call service though so im probably missing something there… to me it seems like ‘device’ and ‘call service’ are completely different things both capable to interact with mobile apps somehow but that page you linked only works for one of the two and i was messing with the wrong one.