Question

如何验证<img src ="<img URL>">是否有效。每次我运行代码并输入非URL图像时，它将始终显示错误 asd：1 GET file:///F:/Practice_site/htdocs/copy_html_activities/html_activities/activity%205/asd 0 ()

请帮助我进行一些验证并摆脱错误

我的js：

function delete_row(no)
{

    document.getElementById("row"+no+"").outerHTML="";
}


function add_row()
{   
     var new_image=document.getElementById("new_image").value;
     var new_title=document.getElementById("new_title").value;
     var new_description=document.getElementById("new_description").value;
    if (new_image&&new_title&&new_description != "") {
         var table=document.getElementById("data_table");
         var table_len=(table.rows.length)-1;
         var row = table.insertRow(table_len).outerHTML=
         "<div id='row"+table_len+"'><div id='image_row"+table_len+"'><img src = "+new_image+"></div><div id='title_row"+table_len+"'>"+new_title+
         "</div><div id='age_row"+table_len+"'>"+new_description+"</div><div><input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></div></div>";

         document.getElementById("new_image").value="";
         document.getElementById("new_title").value="";
         document.getElementById("new_description").value="";
     }
}

function imgError(image) {
    image.onerror = "";
    image.src = "/images/no_photo.jpg";
    return true;
}

如果有人可以帮助我解决这个问题，我将感到非常高兴。非常感谢

Answer 1

您可以保证检查图像是否有效：

function isValidImg( url ) {
    return new Promise( function ( resolve, reject ) {

        var image = new Image;

        image.onload = function ( ) { resolve( image ) };
        image.onerror = image.onabort = reject;

        image.src = url;
    } );
}

以及您的代码中

function add_row()
{   
    var new_image=document.getElementById("new_image").value;
    isValidImg(new_image)
    .then(function() {
        var new_title=document.getElementById("new_title").value;
        var new_description=document.getElementById("new_description").value;
        if (new_image&&new_title&&new_description != "") {
            var table=document.getElementById("data_table");
            var table_len=(table.rows.length)-1;
            var row = table.insertRow(table_len).outerHTML=
            "<div id='row"+table_len+"'><div id='image_row"+table_len+"'><img src = "+new_image+"></div><div id='title_row"+table_len+"'>"+new_title+
            "</div><div id='age_row"+table_len+"'>"+new_description+"</div><div><input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></div></div>";

            document.getElementById("new_image").value="";
            document.getElementById("new_title").value="";
            document.getElementById("new_description").value="";
        }
    })
    .catch(function() {
        alert('Error! Not a valid image.')
        // do what you need to do here if the image is not valid
    })
}

Answer 2

问题非常模糊，我猜您正在使用香草ES5。图像源应该是静态资源，或者，可以插入到动态的，服务器生成的图像的链接...，但是它需要服务器合作才能完成，听起来您只在做客户端-副业。

第一件事：

HTMLImgElements没有value属性，因此以下内容：

var new_image=document.getElementById("new_image").value;

不会为 new_image 分配任何内容，它将保持 undefined ，除非您在某处分配了 value 属性及其值其他代码，但在此示例中未显示。

var new_description=document.getElementById("new_description").value;

通过查看添加的代码，我看不到ID为“ new_description”的任何元素，如果那样的话，此行将产生类型错误：“无法解析未定义的value属性”。并且即使您确实具有该ID的元素， HTMLTextNodes 也没有value属性，因此 new_description 验证将保持 undefined 。< / p>

基本上，这段代码是一团糟。

另一件事是，您可能对javascript很陌生，因为发生手工错误时，您应该使用 try catch机制：

try{}catch(e){}then{}

所以您可以尝试这样的事情：

function add_row()
{   
    try{


     var new_image=document.getElementById("new_image").value;
     var new_title=document.getElementById("new_title").value;
     var new_description=document.getElementById("new_description").value;
    if (new_image&&new_title&&new_description != "") {
         var table=document.getElementById("data_table");
         var table_len=(table.rows.length)-1;
         var row = table.insertRow(table_len).outerHTML=
         "<div id='row"+table_len+"'><div id='image_row"+table_len+"'><img src = 
         "+new_image+"></div><div id='title_row"+table_len+"'>"+new_title+
         "</div><div id='age_row"+table_len+"'>"+new_description+"</div><div><input 
         type='button' value='Delete' class='delete' 
         onclick='delete_row("+table_len+")'> 
          </div></div>";
           document.getElementById("new_image").value="";
         document.getElementById("new_title").value="";
         document.getElementById("new_description").value="";
  }
  catch(e){

  // YOUR ERROR IS HERE IN THE ERROR OBJECT OF e

  }   



  }

<img/>验证是否为img网址

2 个答案: