前端vue-cli项目中使用img图片和background背景图的几种方法
时间：2023-12-14我会给你详细讲解前端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属性的方法。希望能对你有所帮助。
相关文章
Windows自动更新造成“HTTP Error 503,The service is unavailable。”公司开发的某业务系统出故障了，于是通过VPN在家里直接访问该系统，结果系统器返回 Service Unavailable --------------------------------------------------------------
iframe 如何设置高度自适应 - iframe 自适应高度的方法最近些项目遇到用iframe的地方，发现设置的固定高有时不能完全适应项目环境，不是高了就是不够高，在页面里看着很不爽。如何想办法到使用 iframe 自适应高度的方法，下面分