我会给你详细讲解前端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属性的方法。希望能对你有所帮助。
The End
大气响应式网络建站服务公司织梦模板
高端大气html5设计公司网站源码
织梦dede网页模板下载素材销售下载站平台（带会员中心带筛选）
财税代理公司注册代理记账网站织梦模板（带手机端）
成人高考自考在职研究生教育机构网站源码(带手机端)
高端HTML5响应式企业集团通用类网站织梦模板(自适应手机端)