当前位置: 首页 > Web前端 > HTML5

前端vue-cli项目中img图片和背景图的几种使用方法

时间:2023-04-05 19:03:45 HTML5

前端的背景图极其常见,但是却容易出现各种问题。一种是脚手架本身的资源引用方式,比如指定静态资源文件夹。一种是导入图片资源的方式。有时使用绝对或相对路径会导致错误。css方法可以正常使用background属性。如果有问题,图片资源应该放在static静态资源文件夹下,不要放在assets类的其他文件夹下。

import方法使用import导入背景图片importbgImgfrom"@/../static/images/logo.png"exportdefault{name:'App',data(){return{bgImg:bgImg,}}}使用内联样式
require方法使用require来getpicturesexportdefault{name:'App',data(){return{bgImg:require("@/../static/images/logo.png"),}}}赋值为img