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引入图片

### 如何在 UniApp 中添加和使用图片资源

#### 添加本地图片资源
为了在 UniApp 项目中使用本地图片，在项目的 `static` 文件夹内放置所需的图像文件是一个常见做法。按照官方推荐的目录结构，可以创建子文件夹来更好地管理不同类型的静态资源[^1]。

project-root/
├── static/
│   ├── images/
│   │   └── logo.png

当需要引用这些位于 `static/images/` 下面的图片时，可以在页面或组件中的 WXML 或者样式表里通过相对路径指定：

<template>
  <view class="container">
    <!-- 使用本地图片 -->
    <image src="/static/images/logo.png"></image>
  </view>
</template>

<style scoped>
/* CSS */
.container img {
  width: 100px;
}
</style>

对于分包情况下的图片加载，确保各个分包内的 HTML 和脚本能够正确解析到根级别的 `/static/` 路径即可正常显示图片。

#### 外部网络图片
如果要引入外部服务器托管的图片，则可以直接利用完整的 URL 地址作为 `src` 属性值。值得注意的是，URL 应遵循特定格式以便兼容 ImageX 实时处理服务，这允许动态调整图片大小和其他属性而无需更改原始链接[^2]。

<template>
  <view class="network-image-container">
    <!-- 使用远程图片 -->
    <image :src="'https://example.com/path/to/image.avif' | formatImageUrl"></image>
  </view>
</template>

<script>
export default {
  filters: {
    formatImageUrl(url) {
      return `${url}?imageView2/2/w/800`; // 假设这是ImageX的一个参数设置例子
    }
  }
};
</script>

以上方法适用于大多数情况下向 UniApp 页面添加并展示图片的需求。考虑到性能优化以及用户体验提升方面的要求，建议尽可能采用合适的压缩算法保存图片，并合理规划缓存策略以减少不必要的请求次数。

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 ]