笔记大全

uniapp 图片地址如何传给VIEW

更新时间：2023-07-12

首先，需要明确的是，uniapp是一种基于Vue.js框架的跨平台应用开发解决方案，它支持在一个代码库中同时开发运行在iOS、Android、H5、以及各大小程序（如微信小程序、支付宝小程序等）平台上的应用程序。而在uniapp中，我们常常需要在页面上展示图片，实现这个功能的前提是需要将图片的地址传入到View组件中。一、使用img标签展示最常见的展示图片的方式莫过于使用img标签:

1. 使用img标签展示图片

假设我们有一张名为"avatar.png"的图片，它的地址为"http://www.example.com/avatar.png"，那么我们可以这样展示它：

<img src="http://www.example.com/avatar.png">

这段代码会在页面上展示一个图片，它的地址是"http://www.example.com/avatar.png"。如果需要将图片的地址通过props属性传入到组件当中，可以这样实现：

<template>
  <div>
    <img :src="avatarUrl">
  </div>
</template>

<script>
export default {
  props: {
    avatarUrl: {
      type: String,
      default: ''
    }
  }
}
</script>

二、使用background-image展示除了使用img标签之外，我们还可以使用CSS中的background-image属性来展示图片。

2. 使用background-image展示图片

假设我们需要在一个div中展示一张名为"bg.jpg"的背景图片，那么我们可以这样实现：

<div style="background-image: url(http://www.example.com/bg.jpg);"></div>

这段代码会将一张名为"bg.jpg"的图片作为这个div的背景图片。如果需要将图片的地址通过props属性传入到组件当中，可以这样实现：

<template>
  <div :style="{ backgroundImage: 'url(' + bgImageUrl + ')' }"></div>
</template>

<script>
export default {
  props: {
    bgImageUrl: {
      type: String,
      default: ''
    }
  }
}
</script>

三、使用base64编码展示除了从服务端获取图片地址之外，我们还可以直接将图片以base64的形式嵌入到代码中，并通过data URL的形式展示出来：

3. 使用base64编码展示图片

<template>
  <div :style="{ backgroundImage: 'url(' + bgImageBase64 + ')' }"></div>
</template>

<script>
export default {
  data () {
    return {
      bgImageBase64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD…' // base64编码的图片
    }
  }
}
</script>

这段代码会将一张以base64编码的图片作为这个div的背景图片。四、使用uni-image组件展示除了上述几种方式之外，uniapp还提供了uni-image组件，它可以实现在uniapp应用中展示图片的功能。

4. 使用uni-image组件展示图片

<template>
  <uni-image src="http://www.example.com/avatar.png"></uni-image>
</template>

这段代码会展示一张名为"avatar.png"的图片，它的地址是"http://www.example.com/avatar.png"。以上就是关于在uniapp中展示图片的几种方式，根据具体的应用场景和需求，可以选择不同的方式来实现图片的展示和传递。

c语言编程笔录