vue.js 我想显示从API获得的口袋妖怪图像,但我只获得图像的url,不知道如何操作

n9vozmp4  于 2023-02-13  发布在  Vue.js
关注(0)|答案(1)|浏览(122)

我是编程新手,需要一些帮助。我成功地从API中获取了一个随机口袋妖怪,并获得了它的数据:id,name和picture。对我来说最重要的事情是在我制作的模态中显示那个口袋妖怪的图像。问题是我得到了图像的url,但我不知道如何显示itx 1c 0d1x
此外,我希望有人能帮助我,以便当我输入的名称,口袋妖怪在输入,它可以检查我,如果它是相同的,我有某种警报或消息反馈,我猜。非常感谢提前
1 ] 1
这是store.js中从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)
      }
    },

这是一个函数,我调用它来从store.js获取口袋妖怪:

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

这是头组件,我有我的模态,我想显示口袋妖怪的图像,其中是{{ 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>
zrfyljdw

zrfyljdw1#

你需要把它放在img标签里

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

相关问题