html inside qdialog

[gaguerrero]

Hello! I need to show html code inside qdialog component (not plugin). In case it is not possible, I need to know how I could adapt the plugin to display an image.
Thank you for your time!

[beets]

@gaguerrero You can easily put anything you want in a qdialog component. Can you explain more your problem?

    <q-dialog v-model="isShowing">
      <q-card>
        <q-card-section>
          <div class="text-h6">Alert</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          <q-img src="http://example.com/image.png" />
        </q-card-section>

        <q-card-actions align="right">
          <q-btn flat label="OK" color="primary" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>

[gaguerrero]

Thank you for the answer, I need to show html text that comes from the backend in “strTextoConfirmar” property.
This is the code

<q-dialog v-model=“promptConfirmar” html:true persistent>
<q-card>
<q-card-section class=“row items-center”>
<q-avatar>
<img src="~assets/iconofirma.png">
</q-avatar>

	  <q-separator size="1em" color="white"/>			  
	  <div class="q-ml-sm">{{strTextoConfirmar}}</div>
	</q-card-section>
	<q-card-actions align="right">
	  <q-btn flat label="Cancelar" color="primary" v-close-popup />
	  <q-btn flat label="Enviar" color="primary" v-close-popup @click="firmar()" />
	</q-card-actions>
  </q-card>
</q-dialog>

[beets]

@gaguerrero If you want to display HTML, you can use:

	  <div class="q-ml-sm" v-html="strTextoConfirmar"></div>

instead of:

	  <div class="q-ml-sm">{{strTextoConfirmar}}</div>

Be very careful that the strTextoConfirmar is either not user generated, or sanitized as using v-html can open your app to XSS attacks.

[gaguerrero]

Thank you! It’s what I was looking for