Vue CLI添加内联CSS背景图像，路径错误

问题描述

和其他许多人一样，我似乎找不到正确的道路。

使用@ / assets / drive.jpg

我尝试过：~@/assets/drive.jpg，〜/ assets / drive.jpg，@ / assets / drive.jpg

当我在CSS中对其进行硬编码时，它可以工作，但是一旦我尝试将其内联（用于动态目的），它将不允许我使用。

<div>
      class="hero-image"
      :style="{
          backgroundImage: `url('${imageUrl}')`,backgroundPosition: `${imagePosition}`
      }"
</div>

解决方法

这是行不通的原因。

@是webpack解释的别名。它将对导入的文件和<style>块执行此操作，但是当您将其作为模板中的字符串使用时，它将无法处理。它也可能不会将图像从资产移到dist文件夹中。

不幸的是，您很可能需要找到另一种方法来执行此操作。如果您可以扩展所需的结果，则可能会找到最合适的建议。

例如，您可以在dist / assets中已有它们的图像，然后使用诸如/assets/drive.jpg之类的相对路径。

如果您知道要使用的图像列表，则可以使用组件中的require('./assets/drive.jpg')甚至内联添加它们。但是由于这项工作是在编译时完成的，因此您将无法使用require(imageUrl)。