Javascript、Jquery - 添加 url 图像

Question

我正在尝试从给定的网址获取图像。但我不确定我的编码哪里出了问题。显示 url 链接但不显示 url 的图像

例如，我想粘贴此网址链接 https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg让我的编码显示图像而不是链接

任何帮助将不胜感激

$(function() {
  var dialog, form,

    // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
    emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
    url = $("#url"),
    // url = $('#elementId').attr('src');
    name = $("#name"),
    email = $("#email"),
    company = $("#company"),
    password = $("#password"),
    allFields = $([]).add(url).add(name).add(email).add(company).add(password),
    tips = $(".validateTips");

  function updateTips(t) {
    tips
      .text(t)
      .addClass("ui-state-highlight");
    setTimeout(function() {
      tips.removeClass("ui-state-highlight", 1500);
    }, 500);
  }

  function checkLength(o, n, min, max) {
    if (o.val().length > max || o.val().length < min) {
      o.addClass("ui-state-error");
      updateTips("Length of " + n + " must be between " +
        min + " and " + max + ".");
      return false;
    } else {
      return true;
    }
  }

  function checkRegexp(o, regexp, n) {
    if (!(regexp.test(o.val()))) {
      o.addClass("ui-state-error");
      updateTips(n);
      return false;
    } else {
      return true;
    }
  }

  function addUser() {
    var valid = true;
    allFields.removeClass("ui-state-error");

    valid = valid && checkLength(name, "username", 3, 16);
    valid = valid && checkLength(email, "email", 6, 80);
    valid = valid && checkLength(name, "company", 3, 16);
    valid = valid && checkLength(password, "password", 5, 16);

    valid = valid && checkRegexp(name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter.");
    valid = valid && checkRegexp(email, emailRegex, "eg. ui@jquery.com");
    valid = valid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");

    if (valid) {
      $("#users tbody").append("<tr>" +
        "<td>" + url.val() + "</td>" +
        "<td>" + name.val() + "</td>" +
        "<td>" + email.val() + "</td>" +
        "<td>" + company.val() + "</td>" +
        "<td>" + password.val() + "</td>" +
        "</tr>");
      dialog.dialog("close");
    }
    return valid;
  }

  dialog = $("#dialog-form").dialog({
    autoOpen: false,
    height: 510,
    width: 400,
    modal: true,

    buttons: {
      // addClass: "account-btn",
      "GET STARTED": addUser,
      // Cancel: function() {
      //   dialog.dialog( "close" );
      // }
    },
    close: function() {
      form[0].reset();
      allFields.removeClass("ui-state-error");
    }
  });

  form = dialog.find("form").on("submit", function(event) {
    event.preventDefault();
    addUser();
  });

  $("#create-user").button().on("click", function() {
    dialog.dialog("open");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- modal/dialog form -->
<div id="dialog-form" title="">
  <form>
    <fieldset>
      <label for="name">Your Name:</label>
      <input type="text" name="name" id="name" value="username" class="text ui-widget-content ui-corner-all">
      <label for="email">Your Email:</label>
      <input type="text" name="email" id="email" value="username@example.com" class="text ui-widget-content ui-corner-all">
      <label for="company">Your Company Name:</label>
      <input type="text" name="company" id="company" value="example ltd" class="text ui-widget-content ui-corner-all">
      <label for="password">Your Password:</label>
      <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
      <label for="url">Image Url</label>
      <input type="text" name="url" id="url" value="http://example.com/picture.jpg" class="text ui-widget-content ui-corner-all" />
    </fieldset>
  </form>
</div>

<!-- table -->
<div class="L-1-1" id="users-contain" class="ui-widget">
  <h1 class="table_title">Existing Users</h1>
  <table id="users" class="ui-widget ui-widget-content">
    <thead>
      <tr class="ui-widget-header ">
        <th class="first">Image</th>
        <th>Name</th>
        <th>Email</th>
        <th>Company Name</th>
        <th class="last">Password</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>image</td>
        <td>Richill Tamakloe</td>
        <td>richill.tamakloe@example.com</td>
        <td>Example Ltd</td>
        <td>coder1</td>
      </tr>
    </tbody>
  </table>
</div>
<button id="create-user">CREATE NEW USER</button>

Answer 1

您应该替换此行:

"<td>" + url.val() + "</td>" +

像这样:

"<td><img src='" + url.val() + "' /></td>" +

以便实际图像显示在表格单元格中。