Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

IMAGENS (SVG/PNG) NÃO APARECEM APÓS O BUILD DA APLICAÇÃO, COMO RESOLVER??

As imagens aparecem normalmente, no ambiente de desenvolvimento. porém ao fazer o deploy para o gh-pages ou heroku, elas simplesmente se tornam invisíveis.

view code do components navBar

obs: estou usando o Vue 3

1- Tentei do jeito classico: ../assets/etc...

em dev: funcionou; em prod: nothing;

2 - Usando o @: @/assets/etc.

em dev: funcionou; em prod: nothing;

3 - Usando a pasta "static" /static/etc...

em dev: nothing; em prod: nothing;

ps: o "static" aparentemente não é utilizado no vue 3

Algumas outras imgs carregaram, porém essas em especifico não. ps: as imgs seguem o mesmo padrão, formato e tamanho.

no navegador firefox foi observado as seguinte msg (no gh-pages & heroku). sendo assim, sendo as imgs estão chegando normalmente

inicialmente pensei que o problema estava no svg, porém na pag /about, 2 pngs também não funcionaram, sendo que na mesma pag teve um png que funcionou (todos da msm fonte)

npm run serve para iniciar a aplicação (localhost - onde tudo está OK)

Atalho para clonar o repo - git clone https://github.com/Emerson-Britto/home.git

link do repositório: https://github.com/Emerson-Britto/home

link do gh-pages: https://emerson-britto.github.io/home/

link na heroku: https://emerson-brittto.herokuapp.com/

1 resposta
solução!

o erro estava em uma das classes adicionada:

.navIcon {
    opacity: 70%;
}

por algum motivo desconhecido o 'Opacity' estava causando erro pós build.

após alterar, o componente renderiza normalmente:

code alternativo:

.navIcon {
    filter: invert(20%);
}