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 ]