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 (http://localhost:3012/metronic8/react/demo1/crafted/account/settings) 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 (3)
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!
