What should I do if uniapp cannot load local path images?

In the process of using uniapp for development, sometimes we need to load images from local paths. However, in actual development, you may encounter the problem of loading local path images that cannot be displayed. This problem is mainly because the image resources in uniapp need to be packaged and compiled, so the path may not be found during runtime.

The following are several common solutions to the problem of loading local path images for your reference.

1. Use relative paths

In uniapp, the simplest way to load local path images is to use relative paths, because relative paths can locate image resources based on relative positions.

For example, if you want to load a picture and its relative path is:

../image/sample.jpg

, you can use the following code to load the picture:

<template>
  <div>
    <img :src="imgUrl" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: '../image/sample.jpg',
    };
  },
};
</script>

2. Use absolute paths

If you don’t want to use relative paths, you can also use absolute paths to load local path images.

Assume that your project structure is as follows:

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

You can use the following code to load images:

<template>
  <div>
    <img :src="imgUrl" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: '/image/sample.jpg',
    };
  },
};
</script>

The path here is based on the root directory to ensure that the image resources are Loaded correctly.

3. Use the require function

In some cases, using absolute paths and relative paths still cannot solve the problem of loading local path images. At this time, we can use the require function provided by uniapp.

The function of require function is to load a resource from a local path or network path and return the path of the resource. Use the require function to ensure the correctness of resource loading.

The following is an example of using the require function to load local path images:

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

It should be noted that the require function is only used during the compilation phase, so it cannot be used to dynamically load resources at runtime. .

4. Introduce pictures into the static folder

In uniapp, we can place the pictures under the static folder, and import the pictures into the vue file in pages before use. This requires the use of: @/static.

Assuming that the image is in the image folder under the static folder of the project, then it can be introduced in the vue file like this:

<template>
    <img :src="require(&#39;@/static/image/sample.jpg&#39;)"></img>
</template>

The above is the solution to the problem that uniapp cannot load the local path image. plan. Choose the appropriate method according to the specific situation to avoid the situation where the picture cannot be displayed.

The above is the detailed content of What should I do if uniapp cannot load local path images?. For more information, please follow other related articles on the PHP Chinese website!