Unable to render image in ItemTemplate - Autocomplete

[Sandeep G]

Hi Team,

I want to load data with images in itemTemplate, If I add image from assets its not rendering in DOM same with imageURL. Please let know how to achieve it.

ItemTemplate:

var productSearchTemplate = Vue.component('itemTemplate', {

  template: `<div class="single-item">

    <div class="product-img">

      <img src="@/assets/images/placeholder.png" v-if="!data.ItemImage">

      <img :src="data.ItemImage" v-if="data.ItemImage">

    </div>

    <div class="item-name">

      <div class="item-code p-0 text-limit" :title="data.ItemNumber">

      #{{ data.ItemNumber }}

      </div>

      <p class="text-limit" :title="data.ItemCode">{{ data.ItemCode }}</p>

    </div>

    <input type="hidden" :value="data.ItemCode">

    <div class="item-price">100$</div>

    <div>

      <span class="badge badge-success">Stock</span>

    </div>

    <div class="item-add-btn badge badge-pill badge-secondary p-2">

      <span class="mr-1" @click="addItem">Add</span>

    </div>

  </div>`,

  data() {

    return {

      data: {}

    }

  },

  methods: {

    addItem(arg) {

      // Need to pass data to parent component

      console.log(arg, 'additem method')

    }

  }

})

Thanks & Regards,

ItemTemplate:

var productSearchTemplate = Vue.component('itemTemplate', {

  template: `<div class="single-item">

    <div class="product-img">

      <img src="@/assets/images/placeholder.png" v-if="!data.ItemImage">

      <img :src="data.ItemImage" v-if="data.ItemImage">

    </div>

    <div class="item-name">

      <div class="item-code p-0 text-limit" :title="data.ItemNumber">

      #{{ data.ItemNumber }}

      </div>

      <p class="text-limit" :title="data.ItemCode">{{ data.ItemCode }}</p>

    </div>

    <input type="hidden" :value="data.ItemCode">

    <div class="item-price">100$</div>

    <div>

      <span class="badge badge-success">Stock</span>

    </div>

    <div class="item-add-btn badge badge-pill badge-secondary p-2">

      <span class="mr-1" @click="addItem">Add</span>

    </div>

  </div>`,

  data() {

    return {

      data: {}

    }

  },

  methods: {

    addItem(arg) {

      // Need to pass data to parent component

      console.log(arg, 'additem method')

    }

  }

})

[Gunasekar Kuppusamy]

Hi Sandeep,

Greeting from Syncfusion support.

We have validated your reported query from our end, and we have prepared a sample with image using the ItemTemplate.

Please refer the below, code snippets,

<template>

  <div>

      <div class="control-section">

          <div id='content' style="margin: 0px auto; width:300px; padding-top: 40px;">

              <ejs-autocomplete id='employees' :dataSource='data' :fields='fields' :placeholder='watermark'

               :headerTemplate='hTemplate' :itemTemplate='iTemplate' popupHeight="450px" cssClass='autocomplete-template'></ejs-autocomplete>

          </div>

      </div>

  </div>

  </template>

  <style>

  </style>

  <script>

  import Vue from "vue";

  import { AutoCompletePlugin } from "@syncfusion/ej2-vue-dropdowns";

  import * as data from './dataSource.json';

  //import { data } from "./datasource.js";

  import { actionButton } from "./main";

  

  Vue.use(AutoCompletePlugin);

  

  var itemVue = Vue.component("itemTemplate", {

    template: '<div><img class="empImage" :src="data.Eimg" alt="employee"/>' +

              '<div class="ename"> {{data.Name}} </div><div class="job"> {{data.Designation}} </div></div>',

    data() {

      return {

        data: {}

      };

    }

  });

  export default Vue.extend ({

      data: function() {

          return {

              fields: { value: 'Name' },

              watermark: 'e.g. Andrew Fuller',

              hTemplate: function(e) {

                  return {

                      template: headerVue

                  };

              },

              iTemplate: function(e) {

                  return {

                      template: itemVue

                  };

              },

              data:data['empList']

          };

      }

  });

  </script>

Sample: https://codesandbox.io/s/syncufsion-v18-dropdown-forked-5xdj9

Please check the sample and let us know if you have any concerns,

Regards,

Gunasekar

[Sandeep G]

Hi Gunasekar,

Thanks for your reply. I want to add image from assets folder to the template. I have added modified sample below.

https://codesandbox.io/s/syncufsion-v18-dropdown-forked-7ii9c

Regards,

Sandeep G

[Gunasekar Kuppusamy]

Hi Sandeep,

Currently we are validating your reported query. We will update the further details within two business days on or before 5^th October.

Regards,

Gunasekar

[Sandeep G]

Hi Team,

I am awaiting your response.

Regards,
Sandeep G

[Gunasekar Kuppusamy]

Hi Sandeep,

Sorry for the delay.

We will update the details today(15th October)

Regards,

Gunasekar

[Gunasekar Kuppusamy]

Hi Sandeep,

Sorry for the delay.

We have validated your reported query from our end. You can load the images from assets folder using the relative path of the image.

We have prepared a sample for your reference. In this sample, we have rendered item template as new component.

Code Snippets:

App.vue

<template>

<div>

    <div class="control-section">

        <div id='content' style="margin: 0px auto; width:300px; padding-top: 40px;">

            <ejs-autocomplete id='employees' :dataSource='data' :fields='fields' :placeholder='watermark'  :select="onSelect"

             :headerTemplate='hTemplate' :itemTemplate='iTemplate' popupHeight="450px" cssClass='autocomplete-template'></ejs-autocomplete>

        </div>

    </div>

</div>

</template>

<style>

</style>

<script>

import Vue from "vue";

import { AutoCompletePlugin } from "@syncfusion/ej2-vue-dropdowns";

import ItemTemplate from "./itemtemplate.vue";

import * as data from './datasource.json';

Vue.use(AutoCompletePlugin);

export default Vue.extend ({

    data: function() {

        return {

            fields: { value: 'Name' },

            watermark: 'e.g. Andrew Fuller',

            iTemplate: function(e) {

                return {

                    template: ItemTemplate

                };

            },

            data:data['empList']

        };

    }

});

</script>

itemtemplate.vue

<template>

   <div><img class="empImage" src="./assets/logo.png"  alt="employee"/><div class="ename"> {{data.Name}} </div><div class="job"> {{data.Designation}} </div></div>

</template>

<script>

import Vue from "vue";

export default Vue.extend({

    data() {

        return {

            data: {}

        };

    }

});

</script>

Sample: https://www.syncfusion.com/downloads/support/forum/169042/ze/vue1117377643

Please check the solution and let us know if the solution meets your requirement.

Regards,

Gunasekar