How to bind the src in an img ?

  • Hi,


    I try to show images on a page.


    In the views/ad_edit.php I wrote this code :

    Code: part of views/ad_edit.php
    1. <div class="uk-form-row uk-grid uk-grid-width-1-3">
    2. <div class="uk-form-controls" v-for="(index, photo) in listPhotos">
    3. <img src="/storage/fevm/classified/{{ad.id}}/{{photo}}">
    4. <input type="radio" value="{{index}}" name="radio_photo" v-model="ad.ad_photo">{{index}}</input>
    5. </div>
    6. </div>

    This seems to work well :




    (The text on the top is for test only).


    This seems Ok but I got an error :





    So I replaced srcwith v-bind:src, and then I got a new error :



    So it seems that I can't do that in this way.


    How can I do that ?

  • Just use :src="func()"or :src="computedVar".

    This should also work :src="$url('storage/fevm/classified/' + ad.id + '/' + photo)"

    The LORD is my strength and my shield; in him my heart trusts, and I am helped; my heart exults, and with my song I give thanks to him. Psalm 28,7

  • The $url() is a pagekit vue function which adds the pagekit/site root to the url - unfortunately it does not support to resolve routes, that somethig like $url('@hello/view/id', {id: 23}) will not work.


    If you use :src, vue will interpret the provided argument as expression, without a : as literal.


    e.g :placeholder="'Search ...' | trans" works too

    The LORD is my strength and my shield; in him my heart trusts, and I am helped; my heart exults, and with my song I give thanks to him. Psalm 28,7