如何在vue3中显示axios请求的图片

你可以通过在template中使用<img>标签，并设置src属性为axios请求的图片链接来显示图片。例如：

<template>
<div>
<img :src="imgUrl" alt="axios请求的图片">
</div>
</template>

<script>
import axios from 'axios';

export default {
data() {
return {
imgUrl: ''
}
},
mounted() {
axios.get('yourImageApiUrl').then(res => {
this.imgUrl = res.data;
})
}
}
</script>

相关问题

vue3 ts 封装 axios 请求 给出其中的内容

Vue3 TS 封装 Axios 请求的内容包括：1、使用 TS 语法来封装 axios 请求；2、重构 axios 请求，统一处理接口返回的数据；3、简单的封装，方便后期的维护和管理；4、定义接口，方便接口的调用与管理。

在Vue3中配置axios

在Vue3中使用Axios发送HTTP请求，可以先安装Axios库：

npm install axios

然后在你的代码中引入Axios库：

import axios from 'axios';

接下来，你可以封装一个Axios实例，并在Vue3中使用 `provide` 和 `inject` 注册和注入该实例：

// 创建一个Axios实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

// 在Vue3中注册Axios实例
app.provide('axios', axiosInstance);

// 在Vue3中注入Axios实例
const axios = app.inject('axios');

这样就可以在Vue3的组件中使用注入的Axios实例发送HTTP请求了：

axios.get('/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

当然，你也可以封装一个插件来简化这个过程，使其更易于使用。