vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed image paths

pull/12/head
cagataycivici 2019-05-23 17:51:56 +03:00
parent bc379c2d1a
commit 982a7aae60
18 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/autocomplete/AutoCompleteDemo.vue
View File

@ -16,7 +16,7 @@
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"> <AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
<template #item="slotProps"> <template #item="slotProps">
<div class="p-clearfix p-autocomplete-brand-item"> <div class="p-clearfix p-autocomplete-brand-item">
<img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" /> <img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" />
<div>{{slotProps.item}}</div> <div>{{slotProps.item}}</div>
</div> </div>
</template> </template>

4
src/views/autocomplete/AutoCompleteDoc.vue
View File

@ -62,7 +62,7 @@ export default {
<template v-pre> <template v-pre>
&lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt; &lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" /&gt; &lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt;
&lt;div&gt;{{slotProps.item}}&lt;/div&gt; &lt;div&gt;{{slotProps.item}}&lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/AutoComplete&gt; &lt;/AutoComplete&gt;
@ -275,7 +275,7 @@ export default {
&lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt; &lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-clearfix p-autocomplete-brand-item"&gt; &lt;div class="p-clearfix p-autocomplete-brand-item"&gt;
&lt;img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" /&gt; &lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt;
&lt;div&gt;{{slotProps.item}}&lt;/div&gt; &lt;div&gt;{{slotProps.item}}&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;

4
src/views/dataview/DataViewDemo.vue
View File

@ -24,7 +24,7 @@
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"> <div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-3">
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/> <img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
</div> </div>
<div class="p-col-12 p-md-8 car-details"> <div class="p-col-12 p-md-8 car-details">
<div class="p-grid"> <div class="p-grid">
@ -46,7 +46,7 @@
<template #gridItem="slotProps"> <template #gridItem="slotProps">
<div style="padding: .5em" class="p-col-12 p-md-3"> <div style="padding: .5em" class="p-col-12 p-md-3">
<Panel :header="slotProps.data.vin" style="text-align: center"> <Panel :header="slotProps.data.vin" style="text-align: center">
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/> <img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div> <div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
<hr class="ui-widget-content" style="border-top: 0" /> <hr class="ui-widget-content" style="border-top: 0" />
<Button icon="pi pi-search"></Button> <Button icon="pi pi-search"></Button>

8
src/views/dataview/DataViewDoc.vue
View File

@ -36,7 +36,7 @@ mounted() {
&lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt; &lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-3"&gt; &lt;div class="p-col-12 p-md-3"&gt;
&lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt; &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col-12 p-md-8 car-data"&gt; &lt;div class="p-col-12 p-md-8 car-data"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt; &lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
@ -54,7 +54,7 @@ mounted() {
&lt;template #gridItem="slotProps"&gt; &lt;template #gridItem="slotProps"&gt;
&lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt; &lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt;
&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt; &lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
&lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt; &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt; &lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
&lt;hr class="ui-widget-content" style="border-top: 0" /&gt; &lt;hr class="ui-widget-content" style="border-top: 0" /&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt; &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
@ -366,7 +366,7 @@ mounted() {
&lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt; &lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-3"&gt; &lt;div class="p-col-12 p-md-3"&gt;
&lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt; &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col-12 p-md-8 car-data"&gt; &lt;div class="p-col-12 p-md-8 car-data"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt; &lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
@ -384,7 +384,7 @@ mounted() {
&lt;template #gridItem="slotProps"&gt; &lt;template #gridItem="slotProps"&gt;
&lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt; &lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt;
&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt; &lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
&lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt; &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt; &lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
&lt;hr class="ui-widget-content" style="border-top: 0" /&gt; &lt;hr class="ui-widget-content" style="border-top: 0" /&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt; &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;

2
src/views/dropdown/DropdownDemo.vue
View File

@ -18,7 +18,7 @@
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true"> <Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-clearfix p-dropdown-car-option"> <div class="p-clearfix p-dropdown-car-option">
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /> <img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span> <span>{{slotProps.option.brand}}</span>
</div> </div>
</template> </template>

4
src/views/dropdown/DropdownDoc.vue
View File

@ -45,7 +45,7 @@ data() {
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true"&gt; &lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="p-clearfix p-dropdown-car-option"&gt; &lt;div class="p-clearfix p-dropdown-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt; &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt; &lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
@ -265,7 +265,7 @@ data() {
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true"&gt; &lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="p-clearfix p-dropdown-car-option"&gt; &lt;div class="p-clearfix p-dropdown-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt; &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt; &lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;

8
src/views/flexgrid/FlexGridDemo.vue
View File

@ -400,10 +400,10 @@
Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis, Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis,
condimentum eget hendrerit sit amet.</div> condimentum eget hendrerit sit amet.</div>
<div class="p-col-6 p-md-3"><img alt="Galleria 1" src="/demo/images/nature/nature1.jpg" style="width: 100%" /></div> <div class="p-col-6 p-md-3"><img alt="Galleria 1" src="demo/images/nature/nature1.jpg" style="width: 100%" /></div>
<div class="p-col-6 p-md-3"><img alt="Galleria 2" src="/demo/images/nature/nature2.jpg" style="width: 100%" /></div> <div class="p-col-6 p-md-3"><img alt="Galleria 2" src="demo/images/nature/nature2.jpg" style="width: 100%" /></div>
<div class="p-col-6 p-md-3"><img alt="Galleria 3" src="/demo/images/nature/nature3.jpg" style="width: 100%" /></div> <div class="p-col-6 p-md-3"><img alt="Galleria 3" src="demo/images/nature/nature3.jpg" style="width: 100%" /></div>
<div class="p-col-6 p-md-3"><img alt="Galleria 4" src="/demo/images/nature/nature4.jpg" style="width: 100%" /></div> <div class="p-col-6 p-md-3"><img alt="Galleria 4" src="demo/images/nature/nature4.jpg" style="width: 100%" /></div>
<div class="p-col-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien <div class="p-col-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque

8
src/views/flexgrid/FlexGridDoc.vue
View File

@ -964,10 +964,10 @@
Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis, Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis,
condimentum eget hendrerit sit amet.&lt;/div&gt; condimentum eget hendrerit sit amet.&lt;/div&gt;
&lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 1" src="/demo/images/nature/nature1.jpg" style="width: 100%" /&gt;&lt;/div&gt; &lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 1" src="demo/images/nature/nature1.jpg" style="width: 100%" /&gt;&lt;/div&gt;
&lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 2" src="/demo/images/nature/nature2.jpg" style="width: 100%" /&gt;&lt;/div&gt; &lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 2" src="demo/images/nature/nature2.jpg" style="width: 100%" /&gt;&lt;/div&gt;
&lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 3" src="/demo/images/nature/nature3.jpg" style="width: 100%" /&gt;&lt;/div&gt; &lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 3" src="demo/images/nature/nature3.jpg" style="width: 100%" /&gt;&lt;/div&gt;
&lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 4" src="/demo/images/nature/nature4.jpg" style="width: 100%" /&gt;&lt;/div&gt; &lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 4" src="demo/images/nature/nature4.jpg" style="width: 100%" /&gt;&lt;/div&gt;
&lt;div class="p-col-12 p-md-6"&gt;Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien &lt;div class="p-col-12 p-md-6"&gt;Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque

2
src/views/listbox/ListboxDemo.vue
View File

@ -15,7 +15,7 @@
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"> <Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-clearfix"> <div class="p-clearfix">
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" /> <img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span> <span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
</div> </div>
</template> </template>

4
src/views/listbox/ListboxDoc.vue
View File

@ -43,7 +43,7 @@ data() {
&lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt; &lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="p-clearfix"&gt; &lt;div class="p-clearfix"&gt;
&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" /&gt; &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" /&gt;
&lt;span style="float:right;margin:1.25em .5em 0 0"&gt;{{slotProps.option.brand}}&lt;/span&gt; &lt;span style="float:right;margin:1.25em .5em 0 0"&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
@ -229,7 +229,7 @@ data() {
&lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt; &lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="p-clearfix"&gt; &lt;div class="p-clearfix"&gt;
&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" /&gt; &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" /&gt;
&lt;span style="float:right;margin:1.25em .5em 0 0"&gt;{{slotProps.option.brand}}&lt;/span&gt; &lt;span style="float:right;margin:1.25em .5em 0 0"&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;

4
src/views/multiselect/MultiSelectDemo.vue
View File

@ -15,7 +15,7 @@
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true"> <MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
<template #value="slotProps"> <template #value="slotProps">
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"> <div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" /> <img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" />
<span>{{option.brand}}</span> <span>{{option.brand}}</span>
</div> </div>
<div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0"> <div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0">
@ -24,7 +24,7 @@
</template> </template>
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-car-option"> <div class="p-multiselect-car-option">
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /> <img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span> <span>{{slotProps.option.brand}}</span>
</div> </div>
</template> </template>

8
src/views/multiselect/MultiSelectDoc.vue
View File

@ -40,7 +40,7 @@ data() {
&lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car"&gt; &lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car"&gt;
&lt;template #value="slotProps"&gt; &lt;template #value="slotProps"&gt;
&lt;div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"&gt; &lt;div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"&gt;
&lt;img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" /&gt; &lt;img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" /&gt;
&lt;span&gt;{{option.brand}}&lt;/span&gt; &lt;span&gt;{{option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0"&gt; &lt;div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0"&gt;
@ -49,7 +49,7 @@ data() {
&lt;/template&gt; &lt;/template&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="p-multiselect-car-option"&gt; &lt;div class="p-multiselect-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt; &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt; &lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
@ -252,7 +252,7 @@ data() {
&lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true"&gt; &lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true"&gt;
&lt;template #value="slotProps"&gt; &lt;template #value="slotProps"&gt;
&lt;div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"&gt; &lt;div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"&gt;
&lt;img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" /&gt; &lt;img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" /&gt;
&lt;span&gt;{{option.brand}}&lt;/span&gt; &lt;span&gt;{{option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0"&gt; &lt;div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0"&gt;
@ -261,7 +261,7 @@ data() {
&lt;/template&gt; &lt;/template&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="p-multiselect-car-option"&gt; &lt;div class="p-multiselect-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt; &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt; &lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;

2
src/views/overlaypanel/OverlayPanelDemo.vue
View File

@ -11,7 +11,7 @@
<Button type="button" label="Toggle" @click="toggle" /> <Button type="button" label="Toggle" @click="toggle" />
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true"> <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
<img src="/demo/images/nature/nature1.jpg" alt="Nature Image"> <img src="demo/images/nature/nature1.jpg" alt="Nature Image">
</OverlayPanel> </OverlayPanel>
</div> </div>

6
src/views/overlaypanel/OverlayPanelDoc.vue
View File

@ -13,7 +13,7 @@ import OverlayPanel from 'primevue/overlaypanel';
&lt;Button type="button" label="Toggle" @click="toggle" /&gt; &lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;OverlayPanel ref="op"&gt; &lt;OverlayPanel ref="op"&gt;
&lt;img src="/demo/images/nature/nature1.jpg" alt="Nature Image"&gt; &lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;/OverlayPanel&gt; &lt;/OverlayPanel&gt;
</CodeHighlight> </CodeHighlight>
@ -28,7 +28,7 @@ toggle(event) {
Additionally enabling <i>showCloseIcon</i> property displays a close icon at the top right corner to close the panel.</p> Additionally enabling <i>showCloseIcon</i> property displays a close icon at the top right corner to close the panel.</p>
<CodeHighlight> <CodeHighlight>
&lt;OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true"&gt; &lt;OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true"&gt;
&lt;img src="/demo/images/nature/nature1.jpg" alt="Nature Image"&gt; &lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;/OverlayPanel&gt; &lt;/OverlayPanel&gt;
</CodeHighlight> </CodeHighlight>
@ -159,7 +159,7 @@ toggle(event) {
&lt;Button type="button" label="Toggle" @click="toggle" /&gt; &lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true"&gt; &lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true"&gt;
&lt;img src="/demo/images/nature/nature1.jpg" alt="Nature Image"&gt; &lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;/OverlayPanel&gt; &lt;/OverlayPanel&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;

2
src/views/paginator/PaginatorDemo.vue
View File

@ -22,7 +22,7 @@
</Paginator> </Paginator>
<div class="image-gallery"> <div class="image-gallery">
<img :src="'/demo/images/nature/' + image + '.jpg'" /> <img :src="'demo/images/nature/' + image + '.jpg'" />
</div> </div>
</div> </div>

2
src/views/paginator/PaginatorDoc.vue
View File

@ -243,7 +243,7 @@ onPage(event) {
&lt;/Paginator&gt; &lt;/Paginator&gt;
&lt;div class="image-gallery"&gt; &lt;div class="image-gallery"&gt;
&lt;img :src="&#39;/demo/images/nature/&#39; + image + &#39;.jpg&#39;" /&gt; &lt;img :src="&#39;demo/images/nature/&#39; + image + &#39;.jpg&#39;" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;

2
src/views/selectbutton/SelectButtonDemo.vue
View File

@ -20,7 +20,7 @@
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"> <SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
<template #option="slotProps"> <template #option="slotProps">
<div style="text-align: center; padding: 1em; width: 125px"> <div style="text-align: center; padding: 1em; width: 125px">
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" /> <img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
<div style="margin-top: 1em">{{slotProps.option.brand}}</div> <div style="margin-top: 1em">{{slotProps.option.brand}}</div>
</div> </div>
</template> </template>

4
src/views/selectbutton/SelectButtonDoc.vue
View File

@ -41,7 +41,7 @@ export default {
&lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt; &lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div style="text-align: center; padding: 1em; width: 125px"&gt; &lt;div style="text-align: center; padding: 1em; width: 125px"&gt;
&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" /&gt; &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" /&gt;
&lt;div style="margin-top: 1em"&gt;{{slotProps.option.brand}}&lt;/div&gt; &lt;div style="margin-top: 1em"&gt;{{slotProps.option.brand}}&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
@ -176,7 +176,7 @@ export default {
&lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt; &lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div style="text-align: center; padding: 1em; width: 125px"&gt; &lt;div style="text-align: center; padding: 1em; width: 125px"&gt;
&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" /&gt; &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" /&gt;
&lt;div style="margin-top: 1em"&gt;{{slotProps.option.brand}}&lt;/div&gt; &lt;div style="margin-top: 1em"&gt;{{slotProps.option.brand}}&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;