Изображение веб-пакета компонента в стиле Nuxt из каталога ресурсов - PullRequest
Новая
       9

Изображение веб-пакета компонента в стиле Nuxt из каталога ресурсов

0 голосов
/ 30 марта 2020

Я создаю кнопку, используя стилизованные компоненты : 

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}');
...

Изображение работает правильно.

Моя структура изображений каталога:

enter image description here

Кнопка «Выполнить»: 

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

Как я могу отправить стилизованное изображение компонента из ресурсов?

1 Ответ

0 голосов
/ 30 марта 2020

Я думаю, вам нужно ссылаться на них по-другому 

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}');

Надеюсь, это поможет!

...