uniapp如何引入图片

在 `uniapp` 中引入图片可以使用 `img` 标签或者 `background-image` 样式。

### 使用 img 标签

可以在 `template` 中使用 `img` 标签引入图片，例如：

<template>
  <div>
    <img src="../../static/logo.png" alt="logo">
  </div>
</template>

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

### 使用 background-image 样式

也可以在 `style` 中使用 `background-image` 样式引入图片，例如：

<template>
  <div class="bg"></div>
</template>

<style>
.bg {
  background-image: url('../../static/bg.jpg');
  background-size: cover;
  width: 100%;
  height: 100%;
}
</style>

其中 `url()` 中指定了图片的路径，路径也可以是相对路径或绝对路径。

相关问题

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 ]