VUE设置本地背景图片

最新推荐文章于 2025-04-01 10:44:40 发布

Stuild Stuil

最新推荐文章于 2025-04-01 10:44:40 发布

阅读量1w

点赞数 9

文章标签： css javascript vue.js node.js

本文链接：https://blog.csdn.net/qq_35086097/article/details/123979186

版权

本文介绍了如何将网页背景图片从网络URL更改为本地资源。通过在CSS中使用`require`方法结合Vue.js的`style`属性，实现了在login组件中引用本地的bg.jpg图片作为背景。关键步骤包括修改背景图片URL为require语句，并确保路径正确，如`../assets/img/bg.jpg`。这种方法特别适用于非前端开发者解决此类问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有个小需求，原本图片是网络的直接通过这种方式就能调到如下

 min-height: 100vh;
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
      background-image: url(http://codegen.caihongy.cn/20201223/fa6532cc6f56497687271741a8192150.jpg);

但现在要改成本地的，难顶由于非专业前端，试了好久，还在网上找了很多，都不实用，估计是不适用，请教了前端的朋友，一下子就好了。

如下图：

左边是我目录结构，要在login里面加bg.jpg, 仅对我而言把样式代码写在return里面 bgimgUrl用的node的require方法，然后再在标签里面加上style 就可以了写法如下

代码如下

 bgurl: {
            backgroundImage: "url(" + require("../assets/img/bg.jpg") + ")",
            backgroundRepeat:'no-repeat',
            backgroundSize: "cover",
            minHeight: "100vh",
            position: "relative",
            backgroundPosition: "center center",
          },

<div class="container loginIn" :style="bgurl">

完美解决

btw,

login.vue是在views目录下，当../的时候就到了src的目录下，所以这里我写成了../assets/img/bg.jpg