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>" + 

使得實際的圖像在表格單元格中。