URLが削除されると画像が消える

Question

以下はビルドすることを学んでいるmemeジェネレータのjQueryです。基本的にユーザーがURLを入力して削除すると、元のデフォルトイメージが消えてしまい、ユーザーが入力を取り除いた場合にイメージをデフォルト状態に戻す方法に苦しんでいます。

var main = function() { 

    $('#top-text').keyup(function() { 
    var top = $(this).val(); 
    $('.top-caption').text(top); 
}); 
    $('#bottom-text').keyup(function() { 
    var bottom = $(this).val(); 
    $('.bottom-caption').text(bottom) 
}); 
    $('#image-url').keyup(function() { 
    var image = $(this).val(); 
    $('div.meme > img').attr('src',image); 
}); 
}; 

$(document).ready(main); 

この特定のコードでは、ユーザーがURLを削除した場合にデフォルトイメージを再読み込みする方法がわかりません。ここで

$('#image-url').keyup(function() { 
    var image = $(this).val(); 
    $('div.meme > img').attr('src',image); 

対応するHTML

<div class="header"> 
    <div class="container"> 
    <img src="pikachulollipop.gif"> 
    <h1>Cal's Meme Generator</h1> 
    </div> 
</div> 
<div class="main"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 

     <div class="meme thumbnail"> 
      <img src="pancham.png"> 
      <h1 class="top-caption">U say something?</h1> 
      <h1 class="bottom-caption">Deal with it</h1> 
     </div> 

     </div> 
     <div class="col-md-6"> 

     <div class="tool"> 
      <h2>Create a meme</h2> 
      <form role="form"> 
      <div class="form-group"> 
       <label>Image URL</label> 
       <input id="image-url" type="text" class="form-control"> 
      </div> 
      <div class="form-group"> 
       <label>Top text</label> 
       <input id="top-text" type="text" class="form-control"> 
      </div> 
      <div class="form-group"> 
       <label>Bottom text</label> 
       <input id="bottom-text" type="text" class="form-control"> 
      </div> 
      </form> 
     </div> 

Answer 1

は、あなたのイメージはpancham.pngのデフォルトで始まっている - 私はあなたがそのリセットしたいと仮定します。

$('#image-url').keyup(function() { 
    var image = $(this).val() || "pancham.png"; 
    $('div.meme > img').attr('src',image); 
});