Images not rendering in tooltip

[Stanzilla]

<script lang="ts">
methods: {
    rfiTooltip() {
      return "<img width='300px' src='../../assets/ready-for-install-example.png' />"; // TODO: This image does not show up
    },
  },
</script>

<template>
<span
        v-tooltip="{
          content: rfiTooltip,
          html: true,
          strategy: 'fixed',
          theme: 'info-tooltip',
        }"
        class="i-mdi-help mt-[2px]"
        >help</span
      >
</template>

gives me

I also tried

v-tooltip="{
          content: "<img width='300px' src='../../assets/ready-for-install-example.png' />",
          html: true,
          strategy: 'fixed',
          theme: 'info-tooltip',
        }"

but that does the same thing. I have verified that the path is correct because the app errors when it's not there.

[Stanzilla]

After a lot of trial and error, figured out that this works:

v-tooltip="{
          content:
            '<img width=&quot;300px=&quot; src=&quot;src/assets/ready-for-install-example.png&quot; />',
          html: true,
          strategy: 'fixed',
          theme: 'info-tooltip',
        }"

For some reason you have to use single quotes on the outside AND escape double quotes on the inside, if you don't escape them you end up with this error: vuejs/eslint-plugin-vue#2304 which is even more confusing.