suspense 部分，图片加载不出来。

Question

把狗狗的url 换成 猫猫的 url ，仍旧加载不出来。但是下面的猫猫图片能加载出来，所以可能不是猫猫API的问题。那为什么上面那个猫猫图片加载不出来呢？

DogShow.vue 组件的代码：

<template>
  <img src="result && result.message">
</template>

<script lang="ts">
import axios from 'axios'
import { defineComponent } from 'vue'

export default defineComponent({
  // 当函数用 async 包裹的时候，函数里面可以采用 wait 方式来操作异步请求，返回结果还会用 Promise 进行自动包裹
  async setup() {
    const rawData = await axios.get('https://dog.ceo/api/breeds/image/random')
    return {
      result: rawData.data
    }
  }
})
</script>

<style>
</style>

App.vue 组件的代码：

<template>
  <img alt="Vue logo"
       src="./assets/logo.png">
  <h1> {{count}} </h1>
  <h1> {{double}} </h1>
  <h1> {{greetings}} </h1>

  <h1> {{error}} </h1>

  <!-- Suspense 的使用 -->
  <Suspense>
    <!-- Suspense 有两个具名插槽 -->
    <template #fallback>
      <!-- 这里展示加载前的内容 -->
      <h1>Loading...</h1>
    </template>
    <template #default>
      <!-- 这里展示加载后的内容 -->
      <div>
        <async-show />
        <dog-show />
      </div>
    </template>
  </Suspense>

  <!-- Teleport 的使用 -->
  <button @click="openModal"> Open Modal </button>
  <modal :isOpen="modalIsOpen"
         @close-modal="onModalClose"> My modal! </modal>

  <h1 v-if="loading">Loading!...</h1>
  <img v-if="loaded"
       :src="result[0].url">
  <h1> X: {{x}}, Y: {{y}} </h1>
  <button @click="increase"> 👍+1 </button>
  <button @click="updateGreeting"> Update Title </button>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  computed,
  reactive,
  toRefs,
  watch,
  onErrorCaptured
} from 'vue'
import useMousePosition from './hooks/useMousePosition'
import Modal from './components/Modal.vue'
import useURLLoader from './hooks/useURLLoader'
import AsyncShow from './components/AsyncShow.vue'
import DogShow from './components/DogShow.vue'

interface DataProps {
  count: number
  double: number
  increase: () => void
}

interface DogResult {
  message: string
  status: string
}

interface CatResult {
  id: string
  url: string
  width: number
  height: number
}

export default defineComponent({
  components: { Modal, AsyncShow, DogShow },

  name: 'App',
  setup() {
    const error = ref(null)
    // 因为我们不知道error具体是什么类型，所以设置为 any 类型
    onErrorCaptured((e: any) => {
      error.value = e
      // 这个钩子函数要返回一个布尔值，表示这个错误是否向上传播
      return true
    })
    const data: DataProps = reactive({
      count: 0,
      increase: () => {
        data.count++
      },
      double: computed(() => data.count * 2)
    })
    const { x, y } = useMousePosition()
    // const { result, loading, loaded } = useURLLoader<DogResult>(
    //   'https://dog.ceo/api/breeds/image/random'
    // )
    const { result, loading, loaded } = useURLLoader<CatResult[]>(
      'https://api.thecatapi.com/v1/images/search'
    )
    watch(result, () => {
      // console.log(result.value.message)
      // type guard
      if (result.value) {
        // console.log('value', result.value.message)
        console.log('value', result.value[0].url)
      }
    })

    const greetings = ref('')
    const updateGreeting = () => {
      greetings.value += 'Hello!'
    }
    watch([greetings, () => data.count], (newValue, oldValue) => {
      console.log(newValue)
      console.log(oldValue)
      document.title = 'updated' + greetings.value
    })
    const refData = toRefs(data)

    const modalIsOpen = ref(false)
    const openModal = () => {
      modalIsOpen.value = true
    }
    const onModalClose = () => {
      modalIsOpen.value = false
    }
    return {
      ...refData, // 展开后为 count, increase, double
      greetings,
      updateGreeting,
      x,
      y,
      result,
      loading,
      loaded,

      modalIsOpen,
      openModal,
      onModalClose,

      error
    }
  }
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Answer 1

张轩 2021-05-31 20:28:14

同学你好 你 DogShow 的 src 属性写错了，你写成了直接字符串，没有绑定变量～

DogShow.vue 第二行 应该为
<img :src="result && result.message">

• 提问者 淡语 #1

  好的，谢谢老师。低级错误哇！看来我的排错能力也要大大提升哇。

• 张轩 回复 提问者 淡语 #2

  是要提升一下 慢慢来 其实你只要检查这个img 元素的 src 就可以看出端倪 会发现它是一个错误的字符串

Answer 2

张轩 2021-05-29 09:55:08

同学你好 可否把代码给我看下 有代码就会方便很多 或者你可以尝试去看一下显示不出来的那张图片的 url，看看他到底是什么？应该根本就不是一张图片地址

• 提问者 淡语 #1

  老师，代码放上去了，您看看是什么问题。

• 张轩 回复 提问者 淡语 #2

  同学你好 我使用你的代码在我本地试了一下，并没有出现你图上的那个问题，可否把代码以 git 的方式提供一下，因为有可能还有环境和依赖的不同，我可以直接在本地跑你对应的环境和代码。

• 提问者 淡语 #3

  是提供这个吗？https://git.imooc.com/Einzibelun/vue3-basic-note.git