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);

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