如果删除URL，则图像消失

Question

下面是我正在学习构建的模因生成器的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);
});