Question

我想要做的是，如果用户没有选择他的个人资料图片，他将在他的个人资料中有一个临时图像。

如何使用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);
});

Answer 1

我认为你最好的选择是没有jQuery。

如果图片没有src，请在HTML中设置，然后输入默认图片。
```
<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');
    }
});

Answer 2

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>

Answer 3

检查dom上是否存在src属性，如下所示。请注意，直接在html代码中隐藏默认图像（如其他答案状态）更清晰......

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/

Answer 4

你正在寻找这样的东西吗？根据我的理解，我有更新 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");

            }

Answer 5

我建议使用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中加载多个图像（甚至不是从缓存中加载），如果您使用<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/

如果img标记为空，则设置临时图像

5 个答案: