Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Ambiguity with Image Input function - quick clarification required


Hi Sean

Quick question re: https://preview.keenthemes.com/html/metronic/docs/?page=forms/image-input

When retrieving a user's image and displaying it, I previously updated the input value with the stored location $(input).val(img.src).

It appears that the Image Input class for Metronic doesn't allow this.

Can you please clarify:

Option1: Is the placeholder div $(".image-input-placeholder") supposed to be used to display a stored image programmatically:
eg. $(".image-input-placeholder").css('backgroud-url' , img.src);
OR
Option2: Is there a function in your class to use the stored user image:
eg.
var imageInputElement = document.querySelector("#kt_image_input_control");
var imageInput = new KTImageInput(imageInputElement);
imageInput.getInputElement(XXXXX); <--- the img.src here???


Sorry - but I'm not clear from your docs how to populate the stored image of a user.

Many 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,

To display the stored image you can refer to this example.


$(".image-input-wrapper").css("backgroud-url" , img.src);


To get the input element DOM object please use imageInput .getInputElement()

Regards



Hi Sean

Coo thanks.. I'm still not sure how to use the DOM API imageInput .getInputElement(), but so long as I can just use the $(".image-input-placeholder").css('backgroud-url' , img.src) approach that's all good.

Cheers



Hi,

Please refer to the below code:


var imageInputEl = lease use imageInput .getInputElement();
$(imageInputEl).css("backgroud-url" , img.src);


Regards.


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  :(