search

Home  >  Q&A  >  body text

Ionic image loading tips

<p>I'm just playing around with Ionic and Vue 3. </p> <p>But when I use the <code>ion-img</code> tag, the images loaded from the assets folder are not displayed correctly. </p> <p>Folder structure: </p> <pre class="brush:php;toolbar:false;">- assets -- logo.svg - views -- Authentication.vue</pre> <p>When I load the image using standard HTML <code>img</code> it works fine, but not when using <code>ion-img</code>. </p> <pre class="brush:php;toolbar:false;"><ion-row> <img src="../assets/logo.svg"/> <ion-img src="../assets/logo.svg"></ion-img> </ion-row></pre> <p>I have tried the following different src paths: </p> <pre class="brush:php;toolbar:false;">./assets/logo.svg ../assets/logo.svg ../../assets/logo.svg (unreasonable, but I tried it too) ~/assets/logo.svg</pre> <p>Any suggestions on this? </p>
P粉416996828P粉416996828486 days ago608

reply all(1)I'll reply

  • P粉281089485

    P粉2810894852023-08-27 16:15:09

    Check out this answer:

    How to reference static resources in vue javascript

    In short, you can get the results you want by: 

    <ion-img :src="require('../assets/logo.svg')" />

    reply
    0
  • Cancelreply