uniapp 图片地址怎么传给VIEW

uniapp 图片地址怎么传给VIEW

在开发过程中，显示图片是非常常见的需求。而当我们在使用uniapp（基于Vue的跨端框架）进行开发时，如何在Vue组件中渲染图片就成为了一个问题。本文将详细介绍如何在uniapp中使用图片以及图片地址怎么传给Vue组件中。

uniapp中如何使用图片

在uniapp中使用图片有两种方式：

1. 静态资源

将图片放入静态资源文件夹中，并使用相对路径引用。

2. Ajax请求

通过Ajax异步请求服务器上的图片资源。

如何传递图片地址给Vue组件

使用静态资源时，可以直接通过相对路径在Vue中引用图片资源。

但是使用Ajax异步请求时，我们需要将请求得到的图片地址传递给Vue组件。这时候我们可以通过props传递给子组件：

// 父组件模板
<template>
  <div class="parent">
    <child :imgUrl="imgUrl"></child>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        imgUrl: ''
      }
    },
    methods: {
      async getImage() {
        const res = await this.$http.get('/getImage')
        this.imgUrl = res.imgUrl
      }
    },
    mounted() {
      this.getImage()
    }
  }
</script>
// 子组件模板
<template>
  <div class="child">
    <img v-if="imgUrl" :src="imgUrl" />
  </div>
</template>
<script>
  export default {
    props: {
      imgUrl: {
        type: String,
        default: ''
      }
    }
  }
</script>

在这个例子中，我们使用了$http插件来异步获取服务器上的图片资源。然后我们使用props将imgUrl传递给子组件。在子组件中，我们使用img标签的src属性指定imgUrl作为图片的地址来渲染图片。

总结

本文介绍了在uniapp中使用图片的两种方式，以及如何将图片地址传递给Vue组件中。希望本文能帮助你在开发中更好地渲染图片。