我会给你详细讲解前端vue-cli项目中使用img图片和background背景图的几种方法。在这份攻略中，我会涵盖两个示例，分别是使用相对路径和使用CDN路径。
使用img标签添加图片
第一种方法：使用相对路径
如果图片文件和HTML文件在同一个目录下，可以使用相对路径的方式添加图片。
<!-- index.html -->
<body>
<img src="./image.jpg" alt="image"/>
</body>
这里我们有一个图片文件image.jpg和一个HTML文件index.html放在同一个目录下。img标签指定的src路径为相对路径./image.jpg。
第二种方法：使用CDN路径
我们也可以使用CDN（内容分发网络）来获取图片文件，下面是一个使用Google图片CDN的示例。
<!-- index.html -->
<body>
<img src="https://images.google.com/imghp?q=google&ssl=1" alt="google"/>
</body>
使用Google图片CDN获取图片文件的路径为https://images.google.com/imghp?q=google&ssl=1。
使用background属性设置背景图片
第一种方法：使用相对路径
如果背景图片文件和HTML文件在同一个目录下，可以使用相对路径的方式来设置背景图片。
/* styles.css */
body {
background: url("./background.jpg") no-repeat;
background-size: cover;
}
背景图片文件background.jpg和HTML文件index.html放在同一个目录下。在CSS中，background属性指定了背景图片的路径为相对路径./background.jpg，并设置了图片不重复且适应浏览器大小。
第二种方法：使用CDN路径
我们也可以使用CDN来获取背景图片文件，下面是一个使用百度图片CDN的示例。
/* styles.css */
body {
background: url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2091199868,803731995&fm=26&gp=0.jpg") no-repeat;
background-size: cover;
}
使用百度图片CDN获取背景图片文件的路径为https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2091199868,803731995&fm=26&gp=0.jpg。在CSS中，background属性指定了背景图片的CDN路径，并设置了图片不重复且适应浏览器大小。
以上就是使用相对路径和CDN路径来添加img标签和设置background属性的方法。希望能对你有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：前端vue-cli项目中使用img图片和background背景图的几种方法 - Python技术站
微信扫一扫 
支付宝扫一扫 