如果img标签为空，请设置临时图像

-1

我想要做的是，如果用户没有选择他的个人资料图像，他会在他的个人资料上显示临时图像。如果img标签为空，请设置临时图像

如何使用jQuery来做到这一点？

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#Picture').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#imgInp").change(function(){ 
    readURL(this); 
});

来源

2014-06-17 user3746626

你不能简单地在html本身设置一个默认图像吗？ ''？你可以覆盖它，一旦你得到用户指定图像的来源。 –

A [dup]（http://stackoverflow.com/questions/24254480/how-to-prevent-none-images-to-be-seen-in-browsing-using-jquery），并附上您接受的答案？ – Teemu

我觉得你最好的选择是没有的jQuery。

将其设置在HTML中，如果您没有图像的src，然后放在您的默认图像。
```
<img src="default.png" id="Picture" /> 
```

或者您可以使用CSS设置背景图像。

#Picture { 
    background-image:url('default.png'); 
}

但是，如果你真的想用jQuery做那么下面应该工作：

var currentSrc = $('#Picture').attr('src'); 
if(currentSrc==null || currentSrc==""){ 
    $('#Picture').attr('src','default.png'); 
}

如果你需要这个页面的第一次加载，然后把它而不是一个$(document).ready()。

$(document).ready(function() { 
    var currentSrc = $('#Picture').attr('src'); 
    if(currentSrc==null || currentSrc==""){ 
     $('#Picture').attr('src','default.png'); 
    } 
});

来源

2014-06-17 11:16:57 AndrewPolland

http://jsfiddle.net/LvsYc/3127/

您可以为负载src属性，当用户选择另一个图像

<form id="form1" runat="server"> 
     <img src="https://www.google.nl/logos/doodles/2014/world-cup-2014-14-4668630004400128.5-hp.gif" id="Picture" data-src="#" /> <br /> 
     <input type='file' id="imgInp" accept="image/*" /> 
    </form>

来源

2014-06-17 11:10:22

检查是否src属性覆盖它就像这样准备好了。需要注意的是直接像其他答案国家html代码prividing的默认图像是干净多了......

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#Picture').attr('src', e.target.result); 
     }; 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#imgInp").change(function(){ 
    readURL(this); 
}); 

$(document).ready(function(){ 
    if (!$('#Picture').attr('src')){ 
     $('#Picture').attr('src', "http://placehold.it/120x120"); 
    } 
});

见http://jsfiddle.net/LvsYc/3129/

来源

2014-06-17 11:13:28 nozzleman

你在找这样的事情？我有更新按我的理解 http://jsfiddle.net/LvsYc/3131/

if(e.target.result && input.files[0].type.indexOf("image/")>-1) 
      { 
      $('#Picture').attr('src', e.target.result); 
      }else 
      { 
       $('#Picture').attr('src',"http://www.w3schools.com/images/pulpit.jpg"); 

      }

来源

2014-06-17 11:34:56 rjdmello

我会建议使用CSS方法。定义HTML作为 -

<img class="user-profile-avatar" src="">

，然后你可以在CSS定义头像图片 -

.user-profile-avatar{ 
    background: url('YOUR_DEFAULT_AVATAR_IMAGE_URL') no-repeat 0 0 transparent; 
    // additionally you can add height width to image for better results 
    height: 300px; 
    width: 240px; 
}

这样，你不需要在HTML载入多张图片（甚至不是从cache），它可能发生如果您使用<img src-"some_source">，并且一旦DOM正在构建并且页面开始呈现，您将能够看到默认的头像图像。

在页面加载后，您可以通过JS设置用户图像。

或

使用以下方式

HTML代码 -

<div class="user-profile-avatar" data-profile-src="YOUR_USER_IMAGE_URL"></div>

CSS -

.user-profile-avatar{ 
    background: url('YOUR_DEFAULT_AVATAR_IMAGE_URL') no-repeat 0 0 transparent; 
    // additionally you can add height width to image for better results 
    height: 100px; 
    width: 80px; 
}

JS -

$(function(){ 
    $(".user-profile-avatar").each(function(){ 
     var el = $(this); 
     var src = el.data("profile-src") != "" ? el.attr("data-profile-src") : "http://www.newportoak.com/wp-content/uploads/default-avatar.jpg"; 
     el.css({ 
      "background-image": "url('"+src+"')" 
     }); 
    }); 
});

我使用jQuery来简化演示。 http://jsfiddle.net/Pu9NU/

来源

2014-06-17 13:29:10 abhnv

如果img标签为空，请设置临时图像

回答

相关问题