VueJS - KTImage Not change when upload Image
Please change the avatar and nothing change.
Replies (7)
and i think this is broken too. how to manage defaultImage using variable
const fetchUserData = async () => {
const data = await getData(recordId);
record.value = data;
record.value.password = '';
record.value.status = (data.status === 1) ? true : false;
imageDefault.value = getUploadAssetPath(data.imageUrl);
};
<img src="https://i.ibb.co.com/f9DFXjV/Screenshot-2024-06-17-at-14-45-02.png" alt="Screenshot-2024-06-17-at-14-45-02" border="0">
<img src="https://ibb.co.com/5kK41bX" />
Hi,
Could you please specify which Metronic version you are using?
In Vue tooltips can be used thought v-tooltip directive:
<i
class="fas fa-exclamation-circle ms-1 fs-7"
v-tooltip
title="Tooltip text"
></i>You can set the default image from your CSS, you can refer to this example.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Yes, I followed the instructions in the example, but I modified it a little by using the imageDefault variable. As in the picture above, I used the :style= attribute instead of the style attribute (without the colon).
Hi,
From the attached screenshot, I see that your element has two background images. Could it be that these two images conflict?
If you just want to show the defaultImage then you can remove the style attribute from the pattern element.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
holla lauris thankyou for replying me.
The tooltips not showing.<pre></pre>
<!--begin::Cancel button-->
<span class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
data-kt-image-input-action="cancel"
data-bs-toggle="tooltip"
data-bs-dismiss="click"
title="Cancel avatar">
<i class="ki-outline ki-cross fs-3"></i>
</span>
<!--end::Cancel button-->onMounted( async () => {
await fetchUserData();
ImageInputComponent.bootstrap();
});Hi,
Did you initialized our ImageInputComponent?
onMounted(() => {
ImageInputComponent.bootstrap();
});Regards,
Lauris Stepanovs,
Keenthemes Support Team
