在 sass 中添加背景图像

Question

在我目前正在做的一个简单的 Vue.js 项目中放置背景图片时遇到问题！

我已经尝试了所有可能的解决方案。但没有运气。这就是为什么我在这里得到像你这样的专家的帮助！

创建了英雄部分后，我尝试为其添加背景图片。是的，背景图像已导入正确的文件夹，并且文件夹的位置也正确写入。但是，一旦编译器编译了程序，我就会得到蟋蟀！没什么！

这是 Sass 代码

.hero
    background: url ('..../assets/clouds.jpg')
    background-size: cover
    background-color:#ffffff

这是供您参考的 HTML 代码

 <div class = "home">
    <section class="hero">
      <div class="hero-body">
        <div class=" container">
          <h1 class="title"> {{heading}} </h1>
          <div class="is-two-thids column is-paddingless"> 
            <h2 class="subtitile is-4"> {{subheading}} </h2>
          </div>

          <a class="button is-large is-primary" id ="learn"> Learn More</a> 
        </div>  
      </div>   
    </section>  
  </div>

有趣的是没有显示错误消息。没错，零错误消息。

这是我收到的最终产品

对于大多数人来说，这应该是一个非常简单的解决方法。那么，你能帮助这位初学者摆脱这种痛苦吗！

谢谢！

编辑：调整更改后收到以下错误消息

背景：网址（'@/assets/clouds.jpg'）

编辑 2：Sass 文件及其位置。

它的位置是src/router/mq.saas

编辑3：得到所需的

Answer 1

您的问题是 ..../ 不是有效的相对路径遍历符号。只有./（当前目录）或../（父目录）有效。

假设您已经使用 Vue CLI (v3) 构建了应用程序，您应该可以使用

background: url ('@/assets/clouds.jpg')

其中@ 配置为<projectRoot>/src 的别名。

见https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules

---

或者，从您的 Sass 文件/Vue 组件构造一个有效的相对路径。

例如，假设您在src/mq.sass 并想引用src/assets/clouds.jpg，则相对路径为

background: url('./assets/clouds.jpg')