在Vue项目中，添加的背景图片在服务器上不显示，如何处理

Z时代
2024-01-10
分类：综合

vue

遇到的问题：

在vue项目开发过程中，我们常常会在页面中添加背景图片。可是当我们在样式中添加了背景图片，编译打包部署到服务器上时，发现图片并不能显示出来，这是为什么呢~~~

我们一般写的css样式如下：

background: url("../../assets/logo.png") no-repeat;

问题原因：

因为在编译打包后，图片的路径解析出现了问题。

解决方法：

1、在data中定义如下：


export default {
    name: 'index',
    data() {
        return {
            tips: {
                backgroundImage: "url(" + require("../../assets/logo.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "50px 50px"
            }
        }
    }
}