javascriptimagevue.jsurl

I want to display a pokemon image that I get from the API, but I only get the url of the image and I don't know how to do it

I'm new to programming and need some help. I successfully get a random pokemon from the API and get its data: id, name and picture. The most important thing for me is to show the image of that pokemon in the modal I made. The problem is that I get the url of the image and I don't know how to display itenter image description here

In addition, I would like someone to help me so that when I enter the name of that pokemon in the input, it can check for me and if it is identical, I have some kind of alert or message feedback that I guessed. Thank you very much in advance

1]1

This is function in store.js to get one Pokemon from Api :

async getOnePokemon() {
      try {
        let id = Math.floor(Math.random() * 151) + 1;
        let response = await axios.get(`${apiLink}/pokemon/${id}`)
        if(response.data){
          let pokemon = {
            id: response.data.id,
            name: response.data.name,
            image: response.data.sprites.front_default
          }
          return pokemon
        }
      } catch (error) {
        console.log(error)
      }
    },

this is function that I call to get pokemon from store.js:

async function GetPokemons() {
  try {
    let response = await PokemonStore.getOnePokemon();
    pokemonId.value = response;
    
    console.log(pokemonId.value)
  } catch (error) {
    throw error;
  }
}

this is header component where i have my modal where I want to show the image of pokemon where is {{ pokemonId.image }}

<el-dialog v-model="game" title="Who's that pokemon?" width="35%" height="50%" center>
          <div class="modalHeader">
            {{ pokemonId.image }}
          </div>
            <div class="footer">
                <div class="inputDiv">
                    <input class="pokeNameInput" type="text" placeholder="Search pokemon" />
                </div>
                <span>
                    <el-button id="submitBtn" @click="LogInModalVisible = false">Submit</el-button>
                    <el-button id="skipBtn" @click="LogInModalVisible = false;">Skip
                        <el-icon class="el-icon--right"><ArrowRight /></el-icon></el-button>
                    <el-button id="pokedexGameBtn" @click="LogInModalVisible = false">Pokedex</el-button>
                </span>
            </div>
        </el-dialog>

Solution

  • You need to put it in img tag

    <img :src="pokemonId.image" />