Inserir ícone svg no Vue

Front-end
, ,
#1

Olá,

Estou criando uma aplicação em Vue e estou tentando inserir um ícone SVG no Navbar utilizando Bootstrap, mas, quando eu uso a tag , só é exibido um ícone de imagem não identificada e a legenda da propriedade alt. Quando insiro a tag não aparece nada. Eu preciso desse ícone específico, pois não há no fontawesome. Alguém saberia me orientar a fazer com essa imagem/ícone aparecesse na minha barra de menu, por favor?

Código abaixo:

<template>
<div class="menu">
    <b-navbar toggleable="sm" type="dark" variant="info">
        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

        <b-collapse id="nav-collapse" is-nav>
            <b-navbar-nav>
                <b-nav-item href="#">Home</b-nav-item>
                <b-nav-item href="#">Sobre</b-nav-item>
                <b-nav-item href="#">Promoções</b-nav-item>
                <b-nav-item href="#">Produtos</b-nav-item>
                <b-nav-item href="#">Contato</b-nav-item>
                <b-img src= "src/assets/icons/icon-cart.svg" fluid alt="cart"></b-img>
            </b-navbar-nav>
        </b-collapse>
    </b-navbar>
</div>
#2

Quando vc inspeciona esse elemento no navegador, o que aparece na renderização dessa tag?

#3

@Lucas_Camara, no caso, aparece a tag completa:

<img data-v-8dc7cce2="" src="src/assets/icons/icon-cart.svg" alt="cart" class="img-fluid">
#4

Em qual pasta está esse componente vue? Está estranho esse src (começando com src/)

#5

@Lucas_Camara, o ícone SVG está dentro da pasta icons, que está dentro da pasta assets. Esse template está dentro da pasta components. A pasta assets e components estão dentro da pasta src. Eu inserir outro path (…/assets/icons/iconCart.svg) no lugar do que apresentei nesse código, mas não foi, também.

#6

Creio que seja o comportamento da tag , pois, quando coloco a tag , a imagem aparece.

#7

Consegui uma maneira, @Lucas_Camara! Fiz desse jeito e foi:

<b-img :src= "require('../assets/icons/iconCart.svg')" alt="cart"></b-img>
1 curtida