资产目录中的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;
  }
`;

我尝试从background-image目录添加assets，但未找到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}');

希望这会有所帮助！