Entrar Ainda não tem acesso?
1
resposta

REDIRECIONAMENTO LINK TYPESCRIPT

por Lucas Escoto da Luz
| 250.5k xp | 6 posts

Estou fazendo um projeto em Angular, onde nele fiz um carrossel de imagens usando o TypeScript, para portfólio pessoal.

Ex.: { image: 'https://loremflickr.com/600/400/brazil,rio', thumbImage: 'https://loremflickr.com/1200/800/brazil,rio', title: 'Image 4', alt: 'Image 4' },

Neste código em TS a imagem do carrossel vem via o link do thumbimage, e ao clicar, a imagem expandida é alterada para outra imagem. Porém, quero usar uma imagem de dentro da minha máquina e em conjunto, desejo que ao clicar na imagem, o usuário seja redirecionado para o meu repositório do github.

Qual o comando do TS consigo para efetuar estas duas alterações (imagem de dentro da máquina e redirecionamento para o repositório do projeto no github)?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
por Silvino Miranda de Oliveira
| 115.5k xp | 20 posts
Full Stack - Senior

Para utilizar uma imagem que está dentro da sua máquina em um componente Angular, você pode colocar a imagem dentro do diretório assets do seu projeto e utilizar o caminho relativo para acessá-la.

Por exemplo, se a imagem estiver dentro do diretório assets/images e tiver o nome my-image.jpg, o caminho relativo para acessá-la ficaria assim:

assets/images/my-image.jpg

Para redirecionar o usuário para o seu repositório do GitHub ao clicar na imagem, você pode utilizar a diretiva routerLink do Angular em conjunto com a tag a.

Por exemplo, se o seu repositório do GitHub tiver a URL https://github.com/seunome/seuprojeto, você pode criar a tag a da seguinte forma:

<a [routerLink]="['https://github.com/seunome/seuprojeto']" target="_blank"><img src="assets/images/my-image.jpg"></a>

Observe que o atributo target="_blank" é utilizado para abrir o link em uma nova guia ou janela do navegador.