Carregamento de imagens em projetos single page em Vue.js

Postado em por Wolmir Cezer Garbin em Vue.js | 76 Visualizações
Última atualização em:

Em qualquer aplicação web sempre existe a necessidade de adicionar uma imagem, ícone ou algum recurso estático necessário.

Quando você precisar carregar imagens ou recursos estáticos em uma aplicação single page com vue.js basta fazer o seguinte procedimento de maneira simples e prática.

Criar pasta static no projeto

O primeiro passo é criar a pasta static dentro do seu projeto, esta pasta será responsável por conter todas as imagens, ícones ou recursos estáticos que forem adicionados. A criação desta pasta também é importante para manter uma organização no seu projeto.

seu-app/static

Criado a pasta agora basta adicionar e utilizar os recursos. Suponhamos que queira utilizar a imagem foto-perfil.png você deve copiar para dentro da pasta static e após poderá utilizar em seu html chamando da seguinte forma:

<img src="/static/foto-perfil.png">

Como fazer para colocar em produção

Para enviar para produção basta copiar a pasta para dentro da raiz do projeto e pronto.

Wolmir Cezer Garbin

Wolmir Cezer Garbin


Sou formado em Desenvolvimento de Sistemas para Internet pela faculdade Mater Dei e Pós graduado em Desenvolvimento de sistemas em Java pela UTFPR. Trabalho a mais de 9 anos com desenvolvimento em Java, Android e Web utilizando as principais tecnologias do mercado. Atuo como professor na faculdade Mater Dei, programador na Garbo Software e criador do Receitas de Código.

Ver mais

Posts relacionados


Code Conference

Esta é uma conferência de código realizada na cidade de Pato Branco para dissiminar tendências e informações sobre programação e novas tecnológias

Veja mais sobre o Code Conference

Publique seu post no Receitas de Código

Agora você pode publicar seu post no Receitas de Código e compartilhar seu conhecimento com muitas pessoas!

Quero publicar