Web前端图片可以通过以下几种方式来显示：
使用HTML的标签：最基本的方法是使用HTML的标签来显示图片。通过在标签中设置src属性，指定图片的URL，即可将图片显示在网页上。例如：
src属性指定了图片的URL，alt属性用来为图片添加描述。
使用CSS的background-image属性：可以使用CSS的background-image属性来在元素的背景中插入图片。通过设置元素的background-image属性来指定图片的URL，然后可以使用background-size属性来控制图片的尺寸。例如：
以上示例中，将一个div元素的背景设置为指定的图片。
使用CSS的content属性：在某些场景下，图片可能需要通过CSS的content属性来显示。通常在伪元素如:before或:after中使用。通过content属性来设置图片的URL，然后使用CSS样式控制其尺寸和显示效果。例如：
以上示例中，通过:before伪元素的content属性来插入图片。
使用JavaScript动态插入图片：在某些情况下，可能需要通过JavaScript来动态地插入图片。可以通过创建一个标签来实现，然后将其添加到DOM中的指定位置。例如：
var img = document.createElement('img');
img.src = 'image.png';
document.body.appendChild(img);
以上示例中，通过创建一个标签，然后设置其src属性为指定的图片URL，最后将其添加到body元素中。
使用响应式图片：为了适应不同的屏幕尺寸和设备像素密度，可以使用响应式图片来优化图片的显示效果。可以使用HTML的标签和标签来为不同的屏幕尺寸提供不同的图片版本。例如：
以上示例中，根据屏幕尺寸的不同，选择不同的图片版本进行显示。如果屏幕尺寸不符合任何media查询条件，则使用标签中的src作为回退图片。
总之，以上是一些常用的在Web前端中显示图片的方法。根据具体的需求和场景，可以选择合适的方法来显示图片。