Avatar not displayed after selection after converting from HTML to ReactJS
Hello,
In https://preview.keenthemes.com/metronic8/demo1/account/settings.html the avatar is editable and according to the doc it should. However, When I attempted to convert the code from the HTML folder to ReactJS it just allowed me to select the image file but not display the selected image. When I ran the React version of the demo ( it simply did not display the avatar edit button at all.
Here is my converted code snippet:
{/* <!--begin::Image input--> */}
<div className="image-input image-input-empty image-input-outline mb-3" data-kt-image-input="true"
style={{ backgroundImage: `url(${process.env.PUBLIC_URL + "/media/svg/files/blank-image.svg"})` }}>
{/* <!--begin::Preview existing thumbnail--> */}
<div className="image-input-wrapper w-150px h-150px"></div>
{/* <!--end::Preview existing thumbnail--> */}
{/* <!--begin::Label--> */}
<label className="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Change game thumbnail">
<i className="bi bi-pencil-fill fs-7"></i>
{/* <!--begin::Inputs--> */}
<input type="file" name="thumbnail" accept=".png, .jpg, .jpeg"/>
<input type="hidden" name="thumbnail_remove" />
{/* <!--end::Inputs--> */}
</label>
{/* <!--end::Label--> */}// ... other code snippet
Am I missing something obvious here? Please advise. Thanks.
Replies (4)
It sounds like a frustrating issue with the avatar display after the conversion. Have you checked if the image paths are correctly set in your ReactJS components? I recently faced a similar challenge while working on a project, and it reminded me of the creative solutions in games like crazy cattle 3d. Hope you find a fix soon!
Hi,
You can reuse this solution, besides the HTML code, you need to initialize an ImageInputComponent you can do it inside useEffect() react hook.
import { ImageInputComponent } from "../../../_metronic/assets/ts/components";
useEffect(() => {
ImageInputComponent.createInstances();
}, [])Works like a charm, thank you~
Could anyone help look at this, please? I've been blocked here for a couple of days. Thanks!
