Imagem

Olá, Renato!
Como vai?

Tem alguns erros neste código.

Primeiro, esse daqui não é um endereço válido de imagem:
https://produtos.acessohost.com.br/storage/products/product.image

Teria que ser algo mais ou menos assim:
https://produtos.acessohost.com.br/storage/products/nome-imagem.png

--

Quando passa uma URL da imagem, não precisa fazer o bind no atributo src, basta simplesmente fazer assim:
src="url-aqui"

--

Qual o valor de products.image?

estou fazendo assim mais sem sucesso

<img src="https://produtos.acessohost.com.br/storage/products/product.image" alt="product.name" style="max-width: 150px; "/>

products.image = testes-2.jpg

minha duvida é como rendereizo uma imagem vinda de uma api?

senão posso usar bind qdo coloco uma url como faço a leitura do nome da imagem ja que no codigo abaixo ele não le product.image sem exitir o bind

<img src="https://produtos.acessohost.com.br/storage/products/product.image" alt="product.name" style="max-width: 150px; "/>

A URL da imagem está errada, esse daqui não é um endereço válido de imagem:
https://produtos.acessohost.com.br/storage/products/product.image

Teria que ser algo mais ou menos assim:
https://produtos.acessohost.com.br/storage/products/nome-imagem.png

--

Sua API precisa devolver a url correta da imagem, algo assim:
https://github.com/especializati/curso-laravel-api-ead/blob/main/app/Http/Resources/CourseResource.php#L23

Acho que vc não comprendeu minha duvida, só queria saber como renderizar no atributo src:

veja como resolvi essa questão:

<template>

    <h1>

        Lista de produtos - <router-link :to="{name: 'products.create'}"><i class="fas fa-plus-square"></i> ADD novo produto</router-link>

    </h1>

    <div v-show="loading">

        Carregando os produtos

    </div>

    <ul>

        <li v-for="product in products" :key="product.id">

        {{ product.name }} - {{ product.image }} - {{ path }}

        <img :src="`${path}${product.image}`" :alt="product.image" style="max-width: 150px; "/> 

        </li>

    </ul>

</template> 

<script>

import { onMounted, ref } from 'vue'

import ProductService from '@/services/products.service'

export default {

    name: 'Products',

    setup() {

        const products = ref([])

        const path = "https://produtos.acessohost.com.br/storage/products/";

        onMounted(() => {

            ProductService.getAll()

                    .then(response => products.value = response.data.data)

                    .catch(error => console.log(error))        

        })

        return {

            products,

            path

        }

    },

}

</script>

Quando faz :src="property" deve passar uma url válida.

Assim, confesso que não sei se funciona, mas é no mínimo estranho:
:src="`${path}${product.image}`"

A prática mais comum, é a API retornar a URL full (válida) para fazer o bind :src="product.image", sendo que em product.image tem a URL full.

Se tiver a URL (string), nem precisa fazer o bind no atributo, basta fazer: src="url-valida"

Professor Carlos só uma sugestão, tenho outra plataforma que acompanho outros cursos aqui parecidos com seu, acho sua didatica muito boa e sua atenção tb, mais utilizar esse recurso de falarmos por aqui é um pouco complicado, as informações nem sempre são entendidas e confunde mais ainda o aluno, vc não teria um whatsaap para contato como tenho no outra plataforma? e melhor, dependendo da questão e dificuldade de entendimento, eles fazem um call e isso ajuda demais, tudo se resolve rapido e não precisa ficar uma ou mais semanas para resolver a duvida, pois no meu caso fico travado na aula

Fala Renato!
Como vai?

Infelizmente não consigo dar um suporte tão individual assim, é inviável, nem mesmo consultorias estou pegando, por conta da tempo. Mas, fico muito feliz em saber que existem outras plataformas que conseguem prestar esse nível de suporte/consultoria.

--

Sobre o seu problema, estou sempre à disposição para te ajudar, sempre te respondo e responderei todos os dias úteis. Pode contar comigo!

--

Se quiser gravar um vídeo, mostrando o seu projeto, é uma maneira legal de explicar a sua dúvida e abreviar o suporte.