uniapp 引入图片

在uniapp中引入图片，可以使用`<img>`标签或者`<uni-image>`组件。

1. 使用`<img>`标签

<img src="/static/image/example.png" alt="示例图片">

其中，`src`属性指定图片的路径，路径可以是相对路径或者绝对路径。在uniapp中，可以将图片放在`static`目录下，然后使用相对路径引用。

2. 使用`<uni-image>`组件

<uni-image src="/static/image/example.png"></uni-image>

`<uni-image>`组件是uniapp提供的图片组件，功能比`<img>`标签更强大，可以支持懒加载、预览、缩放等功能，使用时需要在页面中引入组件：

<template>
  <view>
    <uni-image src="/static/image/example.png"></uni-image>
  </view>
</template>

<script>
import uniImage from '@/components/uni-image/uni-image.vue'

export default {
  components: {
    uniImage
  }
}
</script>

这样就可以在页面中使用`<uni-image>`组件引入图片了。

相关问题

uniapp引入图片方法

在uni-app中，可以使用以下几种方式引入图片：

1. 使用绝对路径引入图片：可以通过在样式中使用`background-image`属性来引入大图片，例如：`background-image: url("https://example.com/image.jpg");` \[1\]。在`<image>`标签中，可以使用`src`属性来引入图片，例如：`<image src="https://example.com/image.jpg" mode="scaleToFill" />` \[2\]。

2. 使用相对路径引入图片：在样式中，可以使用相对路径引入小图片，例如：`background-image: url("~@/static/iconimg/l1.png");` \[1\]。在`<image>`标签中，可以使用相对路径引入图片，例如：`<image src="../static/iconimg/big.png" mode="scaleToFill" />` \[2\]。

3. 使用变量引入图片：在`<image>`标签中，可以使用变量来引入图片，但仅支持相对引入路径变量，例如：`<image :src="imgUrl" mode="scaleToFill" />`，其中`imgUrl`是一个在`data`中定义的变量，可以是相对路径 \[2\]。

4. 使用网络路径引入图片：可以直接使用网络路径来引入图片，例如：`<image src="https://example.com/image.jpg" mode="scaleToFill" />` \[2\]。

此外，uni-app还支持使用base64格式图片和网络路径图片。需要注意的是，小程序不支持在CSS中使用本地文件作为背景图和字体文件，需要以base64格式或网络路径的方式使用。对于本地背景图片的引用路径，推荐使用以`~@`开头的绝对路径 \[3\]。

总结起来，uni-app中引入图片的方法包括绝对路径引入、相对路径引入、变量引入、网络路径引入，以及支持base64格式图片和网络路径图片。
#### 引用[.reference_title]
- *1* *2* [uni-app微信小程序image引入图片；background-image背景图引入图片；小程序预览本地图片；小程序图片过大...](https://blog.csdn.net/i_am_a_div/article/details/118968418)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [uniapp 引用图片地址](https://blog.csdn.net/wangjun5159/article/details/122313823)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

uniapp 引入背景图片 background-image

在UniApp中，引入背景图片通常使用CSS样式来设置`background-image`属性。这个属性允许你在元素的背景上应用一个图像，可能是从本地资源、网络请求或者是图片URL。

例如，在.vue文件中，你可以这样做：

<template>
  <view class="container">
    <image :src="bgImageUrl" slot="placeholder"></image> <!-- 使用占位符图片展示加载过程 -->
    <div class="bg-img-container">
      <view class="bg-img" :style="{ backgroundImage: 'url(' + bgImageUrl + ')' }"></view>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bgImageUrl: '/assets/bg.jpg', // 这里填写你的图片路径
    };
  },
};
</script>

<style scoped>
.container {
  /* 可以添加其他样式 */
}

.bg-img-container {
  position: relative;
}

.bg-img {
  position: absolute; /* 如果你想让图片完全覆盖容器 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover; /* 设置图片填充背景并保持宽高比 */
}
</style>

在这里，我们首先通过`:src`属性设置了占位图，当背景图片加载完成时会被替换。然后在`.bg-img`元素上动态设置了`background-image`，确保了图片能在页面渲染时正确显示。