vue3.0中setup 中导入 静态图片 页面不显示

在Vue 3.0中，可以使用`import`语句将静态图片导入到组件中。但是，需要注意以下几点：

1. 静态图片需要放在`public`目录下。在导入时，需要使用相对于`public`目录的路径。

2. 在`setup`函数中，需要使用`ref`或`reactive`将图片绑定到响应式变量上，才能在模板中使用。

下面是一个示例代码，可以在`setup`中导入一张静态图片并在模板中显示：

<template>
  <div>
    <img :src="imageSrc" alt="静态图片">
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const imageSrc = ref('/img/logo.png'); // 导入静态图片
    return {
      imageSrc
    };
  }
};
</script>

需要注意，如果`imageSrc`是一个普通的字符串变量，而不是通过`ref`或`reactive`绑定到响应式变量上，那么当图片的URL发生变化时，模板不会自动更新。因此，建议在`setup`中使用`ref`或`reactive`来绑定图片。

相关问题

vue3.0中setup

使用axios在Vue3.0的setup中需要先安装axios库，并在需要使用axios的组件或页面中导入axios，然后在setup函数中通过ref或reactive定义一个响应式的数据state，最后在需要发送请求的函数中通过axios发送请求并修改state的值，从而实现页面数据的获取和更新。例如：

1. 安装axios

npm install axios --save

2. 导入axios

import axios from 'axios'

3. 在setup函数中定义state

import {ref} from 'vue'

export default {
  setup() {
    const state = ref({
      dataList: []
    })
    
    // 发送请求的函数
    const fetchData = async() => {
      const res = await axios.get('/api/data')
      state.value.dataList = res.data
    }
    
    return { state, fetchData }
  }
}

4. 在模板中使用state

<template>
  <div>
    <ul>
      <li v-for="data in state.dataList" :key="data.id">{{ data.name }}</li>
    </ul>
    <button @click="fetchData">获取数据</button>
  </div>
</template>

vue3.0中setup写方法

的好处是什么？

在 vue3.0 中，使用 setup 方法写组件的代码比之前的 Options API 更加简洁和直观，同时也更加灵活。通过使用 setup 方法，我们可以直接访问组件实例中的属性和方法，而不需要通过 this 进行访问。setup 函数也提供了一个更加安全的上下文环境，在其中我们可以更容易地编写响应式状态逻辑和逻辑分离的代码。使用 setup 以及对应的 reactive 和 ref 函数，能够更加方便地操作和监听数据源，同时也能够更加方便地进行代码测试和重用。总之，使用 setup 方法能够让我们更加高效、方便地开发 Vue3.0 应用程序。