Использовать локальный значок SVG в проекте

Question

Я пытаюсь визуализировать SVG на экране с помощью CSS. Вот моя файловая структура. Root > Assets > Icon > user-icon.svg. Итак, я пытаюсь добавить это с помощью CSS, как это:

.user-element {
  background-image: url(/assets/icons/user-icon.svg);
}

Но на экране ничего не появляется, и я получаю эту ошибку в консоли:

GET http://localhost:4000/assets/icons/user-icon.svg 404 (Not Found)

Я не пытаюсь сделать сетевой запрос. Больше всего пытаюсь найти SVG в моей локальной файловой системе. Любая помощь в этом была бы велика Спасибо!

Answer 1

перед URL вставьте: ./ и укажите путь в кавычках (''), как показано ниже:

.user-element {
  background-image: url('./assets/icons/user-icon.svg');
}

Если опять не работает, значит, путь неправильный

Но, как я вижу в вашем вопросе, вы говорите, что значок находится в assets/icon/user-icon.svg, но в коде CSS вы используете assets/icons/user-icon.svg, поэтому путь неверен. Попробуйте использовать приведенный ниже код:

.user-element {
  background-image: url(./assets/icon/user-icon.svg);
}

Answer 2

С этим типом URL, просто путем, браузер добавит схему, сервер и порт текущей страницы. Чтобы получить доступ к локальной файловой системе, попробуйте схему file.