来自 assets 目录的 Nuxt 样式的组件 webpack 图像

Question

我使用styled components 创建按钮：

import styled from 'vue-styled-components';
const buttonProps = {
  color: String,
  br: String,
  pad: String,
  bgc: String,
  bgch: String,
  icon: String,
};

export default styled('button', buttonProps)`
  color: ${props => props.color};
  border-radius: ${props => props.br};
  padding: ${props => props.pad};
  background-color: ${props => props.bgc};

  &:hover {
    background-color: ${props => props.bgch};
  }

  &::before {
    content: '';
    background-image: url('~/assets/img/svg/${props => props.icon}');
    width: 22px;
    height: 22px;
  }
`;

我尝试从assets 目录添加background-image，但 Nuxt 返回错误 404 未找到图像。当我将图像从assets 移动到static 并更改组件时：

...
background-image: url('/${props => props.icon}');
...

图像工作正常。

我的结构图片目录：

运行按钮：

<TestButton color="#000" br="red" pad="10px" bgc="green" bgch="red" icon="advertisement.svg">aaa</TestButton>

如何从资产发送到样式化的组件图像？

Answer 1

我认为您需要以不同的方式引用它们

background-image: url('/${props => props.icon}'); // is for static
background-image: url('~assets/img/svg/${props => props.icon}'); // is for assets
// or
background-image: url('@assets/img/svg/${props => props.icon}');

希望这会有所帮助！