Vue CLI 添加内联 css 背景图片，路径错误

Question

和其他许多人一样，我似乎无法找到正确的道路..

使用@/assets/drive.jpg

我试过了：~@/assets/drive.jpg、~/assets/drive.jpg、@/assets/drive.jpg

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

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

Answer 1

这不起作用是有原因的。

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

很遗憾，您很可能需要找到其他方法来执行此操作。如果您可以扩展您想要的结果，您可能会找到最适合的建议。

例如，您可以在 dist/assets 中已有图像，然后在样式中使用相对路径，例如：/assets/drive.jpg。

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