我想使用我的一个组件中assets资源 文件夹中的svg图像作为背景图像.下面是我的组件的一个示例:

<template>
  <div class="container"></div>
</template>

<script>
export default {
  name: 'component'
}
</script>

<style scoped lang="scss">
.container {
  height: 40px;
  width: 40px;
  background-image: url('@/assets/image.svg');
}
</style>

但图像没有显示出来.这条路是正确的.我的错在哪里?

推荐答案

正如注释中突出显示的Max Martynov,您应该使用url('~@/assets/image.svg').

 

Webpack在解析assets资源 [1]时有一些特定规则.

为了在使用时解析别名(@),webpack必须将请求作为模块请求处理.使用前缀~强制webpack将请求视为模块请求,类似于require('some-module/image.svg').

 

工具书类

  1. https://vuejs-templates.github.io/webpack/static.html#asset-resolving-rules

Vue.js相关问答推荐

Nuxt3 Build . put文件夹保持空,没有从.nuxt复制任何内容

如何使用Nuxt 3动态处理无限嵌套路由?

Visual Studio代码中的VUE/VLAR扩展不断崩溃:JS/TS语言服务立即崩溃5次…

具有VUE身份验证的Azure AD

Vue ChildComponent (GrandchildComponent) 应该更新 ParentComponent 的列表

vue 3 中范围样式和深度样式的问题

单击 v-data-table 中行中的任意位置并移动到另一个页面

两个div元素之间的vue2过渡

Vue index.html favicon 问题

VueJs this.method 不是函数?如何在 Vuejs 的另一个方法中调用一个方法?

在 vue-router 中带有路由的 Vuejs2 模态

如何使用 vue-resource 添加额外的标头来发布请求?

Vue&TypeScript:在项目目录外的 TypeScript 组件中实现导入时如何避免错误 TS2345?

错误:vue-loader 要求 @vue/compiler-sfc 存在于依赖树中

如何从浏览器的源中删除 webpack://

脚本npm run dev和npm run watch是做什么用的?

根据nuxt中的url参数动态加载组件

在 Vuejs 中全局导入 Axios 方法

vuejs 复制数据对象和删除属性也会从原始对象中删除属性

Vue.js 显示空格(换行符)