uniapp이 로컬 경로 이미지를 로드할 수 없으면 어떻게 해야 합니까?

uniapp을 사용하여 개발하는 과정에서 로컬 경로에서 이미지를 로드해야 하는 경우가 있습니다. 하지만 실제 개발에서는 표시할 수 없는 로컬 경로 이미지를 로딩하는 문제가 발생할 수 있습니다. 이 문제는 주로 uniapp의 이미지 리소스를 패키징하고 컴파일해야 하므로 런타임 중에 경로를 찾지 못할 수 있기 때문에 발생합니다.

다음은 참조용 로컬 경로 이미지 로드 문제에 대한 몇 가지 일반적인 해결 방법입니다.

1. 상대 경로 사용

uniapp에서 로컬 경로 이미지를 로드하는 가장 쉬운 방법은 상대 경로를 사용하는 것입니다. 상대 경로는 상대 위치를 기반으로 이미지 리소스를 찾을 수 있기 때문입니다.

예를 들어 이미지를 로드하려고 하는데 상대 경로가

../image/sample.jpg

인 경우 다음 코드를 사용하여 이미지를 로드할 수 있습니다.

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

2. 절대 경로를 사용하세요

원치 않는 경우 상대 경로를 사용하는 경우 절대 경로를 사용하여 로컬 경로 이미지를 로드할 수도 있습니다.

프로젝트 구조가 다음과 같다고 가정합니다.

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

다음 코드를 사용하여 이미지를 로드할 수 있습니다.

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

여기의 경로는 이미지 리소스가 올바르게 로드되도록 루트 디렉터리를 기반으로 합니다.

3. 필수 기능 사용

어떤 경우에는 절대 경로와 상대 경로를 사용해도 로컬 경로 이미지 로드 문제를 해결할 수 없습니다. 이때 uniapp에서 제공하는 require 기능을 이용하면 됩니다.

require 함수의 기능은 로컬 경로나 네트워크 경로에서 리소스를 로드하고 리소스의 경로를 반환하는 것입니다. 리소스 로딩의 정확성을 보장하려면 require 함수를 사용하세요.

다음은 require 함수를 사용하여 로컬 경로 이미지를 로드하는 예입니다.

<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>

require 함수는 컴파일 단계에서만 사용되므로 런타임에 리소스를 동적으로 로드하는 데 사용할 수 없다는 점에 유의하세요.

4. static 폴더에 이미지 삽입

uniapp에서는 static 폴더 아래에 이미지를 배치하고, 사용하기 전에 페이지의 vue 파일로 이미지를 가져올 수 있습니다. 이를 위해서는 @/static을 사용해야 합니다.

이미지가 프로젝트의 static 폴더 아래의 image 폴더에 있다고 가정하면 다음과 같이 vue 파일에 도입할 수 있습니다.

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

위는 uniapp이 로컬 경로 이미지를 로드할 수 없는 문제에 대한 해결책입니다. 사진이 표시되지 않는 상황을 방지하려면 특정 상황에 따라 적절한 방법을 선택하십시오.

위 내용은 uniapp이 로컬 경로 이미지를 로드할 수 없으면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!