代码之家  ›  专栏  ›  技术社区  ›  Gautham M

如何从spring引导应用程序的jQuery函数加载静态映像

  •  0
  • Gautham M  · 技术社区  · 6 年前

    我已在中添加了我的图像 src/main/resources/static/images/myimage

    如果我直接在html中提供以下内容, 然后加载图像 :

    <div id="testing"> 
        <div class="card-post__image" 
             style="background-image: url('images/myimages/default-user-imge.jpeg');">
        </div>
    </div>
    

    static

    1 回复  |  直到 6 年前
        1
  •  2
  •   Tân    6 年前

    使用 background-image 具有 url 路径,则需要提供以下属性: 宽度、高度 背景尺寸

    $('.card-post__image')
        .css('background-image', 'url("https://www.zamzar.com/images/filetypes/jpg.png")')
        .css({ width: '100px', height: '100px', 'background-size': '100%' });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <div id="testing"> 
        <div class="card-post__image"></div>
    </div>

    如果要检查图像是否准备好使用,可以使用 Image

    var image = new Image();
    
    image.onload = function () {
      $('body').append(this);
    };
    
    image.error = function () {
      console.log('ERROR!');
    };
    
    image.src = 'https://www.zamzar.com/images/filetypes/jpg.png';
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>