uniapp加载本地路径图片加载不出来怎么办-uni-app-PHP中文网

uniapp加载本地路径图片加载不出来怎么办

PHPz

发布： 2023-04-17 11:25:59

原创

8722人浏览过

在使用uniapp进行开发的过程中，有时候我们需要加载本地路径的图片。但是在实际的开发中，你可能会遇到加载本地路径图片无法显示的问题。这个问题主要是因为uniapp中的图片资源是需要经过打包编译的，所以在运行时可能会出现找不到路径的情况。

下面是几种常见的加载本地路径图片问题的解决方案，供大家参考。

一、使用相对路径

在uniapp中，加载本地路径图片的最简单的方式就是使用相对路径，因为相对路径可以根据相对位置来定位图片资源。

例如，如果你要加载一张图片，它的相对路径为：

../image/sample.jpg

登录后复制

则可以使用以下代码来加载图片：

<template>
  <div>
    @@##@@
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: '../image/sample.jpg',
    };
  },
};
</script>

登录后复制

二、使用绝对路径

如果你不想使用相对路径，也可以使用绝对路径来加载本地路径图片。

假设你的项目结构如下：

├── image
│   └── sample.jpg
│   
├── pages
│   └── index
│       └── index.vue
└── uni.scss

登录后复制

你可以使用以下代码来加载图片：

<template>
  <div>
    @@##@@
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: '/image/sample.jpg',
    };
  },
};
</script>

登录后复制

这里的路径以根目录为基准，可以确保图片资源的正确加载。

三、使用require函数

在某些情况下，使用绝对路径和相对路径仍然无法解决加载本地路径图片的问题。这时候，我们可以使用uniapp提供的require函数。

require函数的作用是加载一个本地路径或者网络路径的资源，并返回资源的路径。使用require函数可以确保资源加载的正确性。

下面是一个使用require函数加载本地路径图片的示例：

<template>
  <div>
    @@##@@
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: '',
    };
  },
  methods: {
    setImage() {
      this.imgUrl = require('../image/sample.jpg');
    },
  },
  mounted() {
    this.setImage();
  },
};
</script>

登录后复制

需要注意的是，require函数只在编译阶段使用，所以不能用在运行时动态加载资源的情况。

四、引入图片到static文件夹

在uniapp中，我们可以将图片放置在static文件夹下面，使用前先引入图片到pages里面的vue文件。这需要使用到：@/static。

假设图片在项目的static文件夹下的image文件夹中，那么在vue文件中就可以这样引入：