php企业网站源码下载,西安建站套餐,国内免费工厂网站建设,青海网页设计情况1#xff1a;图片在/public目录下把图片放到与index.html同级的目录下情况1-1.png方式1因为vue编译后会生成index.html#xff0c;所以我们将图片与index.html放在同一目录下#xff0c;相当于在index.html中使用引入图片情况2#xff1a;图片在/src/assets目录下把图片…情况1图片在/public目录下把图片放到与index.html同级的目录下情况1-1.png方式1因为vue编译后会生成index.html所以我们将图片与index.html放在同一目录下相当于在index.html中使用引入图片情况2图片在/src/assets目录下把图片放到/src/assets目录下情况2-1.png文件层级关系见下图情况2-2.png已知我们在vue中配置为src的目录情况2-3.png方式1在vue组件中定义一个变量变量值为”使用require()方法获取的文件路径”。require()方法是将编写代码时定义的路径转换为编译打包后的路径。// 在vue组件中定义此变量组件创建成功后该变量值为/static/img/login-bg.df6a3174.pngbackgroundImgUrl: require(/assets/login-bg.png)方式2在vue文件中使用style标签写css样式.login-container {/** 当前vue文件在login文件下我们梳理一下通过相对路径找到图片文件* login ↑ views ↑ src ↓ assets ↓ login-bg.png* 于是我们得出如下路径经过测试可以成功引入图片* 这里需要提一下这里路径是编写代码时的路径vue在编译打包时会对路径进行处理*/background-image: url(../../assets/login-bg.png);/** 在vue文件中的style标签内也可以使用表示src目录不过要在前面加~也就是~* 使用~后我们就可以快速写出下面的路径了*/background-image: url(~/assets/login-bg.png);/* 此行样式背景图会按比例缩放填充满整个背景(能保证背景图不变形) */background-size: cover;}