How to display Image in form with JavaScript

Question

I'm working on Task Board. I want to display an image from formulaire and display it. You can check my code ( just a function ) for understand what I want to do.

function createIssueTemplate({
  id,
  status,
  description,
  severity,
  assignedTo,
  /*<img src='${image}'></img>*/
  image
}) {
  return (
    `<div class="well">
        <h6>Issue ID:  ${id} </h6>
        <p><span class="label label-info">${status}</span></p>
        <h3>${description}</h3>
        <p><span class="glyphicon glyphicon-time"></span>${severity}
        <span class="glyphicon glyphicon-user"></span>${assignedTo}</p>
        <a href="#" class="btn btn-warning" onclick="setStatusClosed('${id}')">Close</a>
        <a href="#" class="btn btn-danger" onclick="deleteIssue('${id}')">Delete</a> <br> <br>
    </div>`
  );
}

I'm glad you have some code which you've started on. Where do you wan't your image to be? Why can't you use an image element? — evolutionxbox, May 21 '19 at 09:06
In my formulaire I have an input type file, and in this function above, i want return this image too with other description. — AndroBack, May 21 '19 at 09:08

Rory McCrossan · Answer 1 · 2019-05-21T09:17:22.123

0

The problem is due to your syntax in the function arguments. You've placed an object in there instead of individual argument names. If you correct that then your logic works fine:

function createIssueTemplate(id, status, description, severity, assignedTo, image) {
  return `<div class="well">
    <h6>Issue ID:  ${id} </h6>
    <p><span class="label label-info">${status}</span></p>
    <h3>${description}</h3>
    <p><span class="glyphicon glyphicon-time"></span>${severity}
    <span class="glyphicon glyphicon-user"></span>${assignedTo}</p>
    <a href="#" class="btn btn-warning" onclick="setStatusClosed('${id}')">Close</a>
    <a href="#" class="btn btn-danger" onclick="deleteIssue('${id}')">Delete</a> <br> <br>
    <img src='${image}'></img>
  </div>`
}

$('#foo').append(createIssueTemplate('Id', 'Status', 'Description', 'Severity', 'AssignedTo', 'Image.jpg'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo"></div>

edited May 21 '19 at 09:17

answered May 21 '19 at 09:12

Rory McCrossan

306,214
37
269
303

Thanks but look, when I Add this : in my function, I have this error : Not allowed to load local resource : file:///C:/fakepath – AndroBack May 21 '19 at 09:18
That's because it's not a valid image URL. I'm guessing from the '/fakepath` in there that you're reading the value from a file input? If so, that's not how you show an image from a control. If you want to do that, you need to do this: https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded – Rory McCrossan May 21 '19 at 09:19
So how I can do for that ? – AndroBack May 21 '19 at 09:20
Thank it works for preview only, But when i click submit in my formulaire, the function doesn"t work – AndroBack May 21 '19 at 09:33
What are you expecting to happen on submit? Please also note that all details of what you're trying to do should be in the question, not drip-fed in comments. – Rory McCrossan May 21 '19 at 09:34
This is my initial question, I haven't other question. When Submit, I want my image should display below. You give me a link for preview , it works ok thank you but when you click submit , the image doesn't show – AndroBack May 21 '19 at 09:35

How to display Image in form with JavaScript

1 Answers1