为什么卡映像在Bootstrap 4中使用data-src(而非src)作为映像？

Bootstrap 4卡图像在图像标签中使用src来提供要在给定图像标签中加载的位置，而data-src则提供其他信息，JavaScript可以使用这些信息来改善用户体验。对于data-src和src标签，我们可以得出以下结论：
src：

• 如果要加载并显示特定图像，请使用.src加载该图像URL。

data-src：

• 如果您想要一个元数据(在任何标签上)都可以包含一个URL，请使用data-src或您要选择的任何data-xxx。
• data- *属性用于存储页面或应用程序专用的自定义数据。
• data- *属性使我们能够在所有HTML元素上嵌入自定义数据属性。
• 然后，JavaScript可以使用这些数据来创建更引人入胜的用户体验。

句法：

• 使用src属性：

      var url = document.getElementById("img1").src;

• 使用data-src属性：

下面的示例说明了以上概念：

示例：可以看到以下代码，如何使用src属性提供指向图像的链接，如何使用data-src向JavaScript提供其他信息，例如此处用于更改图像的原始src链接(其中一个data-src属性。

  

    
  
    
  
    
  
    
        Why card images use data-src (not src)
        for image in Bootstrap 4 ?
    
  
    
          
    
              
    
              
    
    
  
    
        h1 {
            color: green;
        }
        .second {
            float: right;
            margin: 20px;
        }
        .first {
            float: left;
            margin: 20px;
        }
    

  

    
        GeeksforGeeks
        A Computer Science Portal for Geeks
    
      
    
        
            
            
                Courses
                
                    Attend the courses Increase
                    the probability
                
                Attend
            
        
          
        
        
            
                  
            
                Interview
                
                    Prepare your self for the Interview
                
                Attend
            
        
    
  
    
        var ele = document.getElementById("img1");
          
        // Switch the image to the URL
        // specified in data-src
        ele.src = ele.dataset.src;
    

  

输出：