如何在vue3中显示axios请求的图片
时间: 2024-05-25 10:19:41 浏览: 11
你可以通过在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中配置axios
在Vue3中使用Axios发送HTTP请求,可以先安装Axios库:
```
npm install axios
```
然后在你的代码中引入Axios库:
```javascript
import axios from 'axios';
```
接下来,你可以封装一个Axios实例,并在Vue3中使用 `provide` 和 `inject` 注册和注入该实例:
```javascript
// 创建一个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请求了:
```javascript
axios.get('/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
```
当然,你也可以封装一个插件来简化这个过程,使其更易于使用。
vue3 ts 封装 axios 请求
在 Vue3 中,可以通过以下步骤封装 Axios 请求:
1. 安装 Axios
```bash
npm install axios
```
2. 创建一个 Axios 实例
在项目中创建一个 axios.ts 文件,使用以下代码创建一个 Axios 实例:
```typescript
import axios, { AxiosInstance } from 'axios';
const instance: AxiosInstance = axios.create({
baseURL: 'http://localhost:3000', // 设置请求的基础 URL
timeout: 10000, // 请求超时时间
});
export default instance;
```
3. 创建一个请求方法
在 axios.ts 文件中,可以创建一个请求方法,封装 Axios 请求:
```typescript
import instance from './axios';
interface Result<T> { // 定义接口,用于返回数据类型
code: number;
message: string;
data: T;
}
export const request = {
get<T>(url: string, params?: any): Promise<Result<T>> {
return instance.get(url, { params }).then(res => res.data);
},
post<T>(url: string, data?: any): Promise<Result<T>> {
return instance.post(url, data).then(res => res.data);
},
put<T>(url: string, data?: any): Promise<Result<T>> {
return instance.put(url, data).then(res => res.data);
},
delete<T>(url: string, params?: any): Promise<Result<T>> {
return instance.delete(url, { params }).then(res => res.data);
},
};
```
4. 使用封装好的请求方法
在组件中使用封装好的请求方法:
```typescript
import { defineComponent, reactive, onMounted } from 'vue';
import { request } from '../axios';
export default defineComponent({
setup() {
const state = reactive({
data: [],
});
onMounted(() => {
request.get('/api/data').then(res => {
if (res.code === 200) {
state.data = res.data;
}
});
});
return state;
},
});
```
以上就是在 Vue3 中使用 TypeScript 封装 Axios 请求的方法。