Metronic Mega Update!Tailwind 4, React 19, Next.js 15, KtUI, ReUI, eCommerce, User Management Apps and more
Explore Update

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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(