[Vuejs]-Display an image within a cell of a bootstrap table's row, using a dynamically created src path

by

3👍

b-table escapes custom html by default. You need to use scoped slot for custom data (like an image) rendering as described here. I guess the code for your case would be something like this:

<b-table
    striped
    dark
    :items="items"
    :fields="fields">
    <template slot="[itemIcon]" slot-scope="data">
        <img :src="data.value" />
    </template>
</b-table>

also change the computed itemIcon from this:

// Save the item icon as a property of the computed item.
let itemImage = new Image()
itemImage.src = imagePrefix + String(theItemSummary[currItem].id) + imageSuffix
computedItem.itemIcon = itemImage

into this: 

// Save the item icon as a property of the computed item.
computedItem.itemIcon = imagePrefix + String(theItemSummary[currItem].id) + imageSuffix

so that computedItem.itemIcon holds only the image source instead of the ‘new Image()’ instance.

And please provide a jsfiddle/codepen if this doesn’t work so that people can dig further easily.

👤Khairul Anik

Leave a comment