如何在非相对路径中包含Vue组件CSS内联样式中的图像？

mbzjlibv 于 2022-11-25 发布在 Vue.js

关注(0)|答案(2)|浏览(124)

我有这个组件代码

<template>
  <div class="example-class">
    <p>Test</p>
  </div>
</template>
<style>
  .example-class {
     background-image: url("HOW to include the image here?");
  }
</style>

如何在样式部分代码中包含图像？
我的组件在目录中

src/component/sample-comp/MyComponent.vue

我的图像在目录中

assets/images

我已经尝试使用@/assets/images/sample-image.png，它不会包含图像。它在下面给出错误

ERROR  Failed to compile with 1 errors                                                                                                                                      08:53:42
This relative module was not found:

    * ./@/assets/images/cta-bg.png in ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-18a303e8","scoped":false,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/frontend/landing-layouts/CallToAction.vue

vue.js

来源：https://stackoverflow.com/questions/53576387/how-to-include-image-in-vue-component-css-inline-styles-in-a-none-relative-path

2条答案

按热度按时间

m528fe3b1#

您不能使用@别名，因为Webpack无法识别<style></style>标记中的此别名。
有两个选项可执行此操作。

第一个选项：

由于@在Webpack中Map为src/，因此使用您的组件时，您的路径在<style></style>标记中应为background-image: url('../../assets/images/cta-bg.png')。

第二个选项：

您可以直接在<div>标签中使用style系结。

<div :style="backgroundImage: `url(${require(`@/assets/images/cta-bg.png`)})`">
  <p>Test</p>
</div>

赞(0）回复(0）举报 2022-11-25

oogrdqng2#

只需更新后台URL表单

<template>
  <div class="example-class">
    <p>Test</p>
  </div>
</template>
<style>
  .example-class {
     background-image: url("HOW to include the image here?");
  }
</style>

结束日期

<template>
  <div class="example-class">
    <p>Test</p>
  </div>
</template>
<style>
  .example-class {
     background-image: url("~@/assets/images/sidebar.svg");
  }
</style>

赞(0）回复(0）举报 2022-11-25

我来回答

如何在非相对路径中包含Vue组件CSS内联样式中的图像？

2条答案

相关问题

热门标签

最新问答