uniapp がローカル パス イメージをロードできない場合はどうすればよいですか?

uniapp を開発に使用するプロセスでは、ローカル パスからイメージをロードする必要がある場合があります。しかし、実際の開発では、表示できないローカルパス画像を読み込むという問題が発生する可能性があります。この問題の主な原因は、uniapp の画像リソースをパッケージ化してコンパイルする必要があるため、実行時にパスが見つからない可能性があることです。

以下は、ローカル パス イメージのロードに関する問題に対する一般的な解決策をいくつか示したものです。参考にしてください。

1. 相対パスの使用

uniapp では、相対パスを使用すると相対位置に基づいて画像リソースを見つけることができるため、ローカル パス画像をロードする最も簡単な方法は相対パスを使用することです。

たとえば、画像をロードし、その相対パスが

../image/sample.jpg

である場合、次のコードを使用して画像をロードできます:

<template>
  <div>
    <img  src="/static/imghwm/default1.png" data-src="imgUrl" class="lazy" alt="uniapp がローカル パス イメージをロードできない場合はどうすればよいですか?" >
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: &#39;../image/sample.jpg&#39;,
    };
  },
};
</script>

2.絶対パスを使用する

相対パスを使用したくない場合は、絶対パスを使用してローカル パス イメージをロードすることもできます。

プロジェクトの構造が次のようになっていると仮定します。

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

次のコードを使用して画像をロードできます。

<template>
  <div>
    <img  src="/static/imghwm/default1.png" data-src="imgUrl" class="lazy" alt="uniapp がローカル パス イメージをロードできない場合はどうすればよいですか?" >
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: &#39;/image/sample.jpg&#39;,
    };
  },
};
</script>

ここでのパスはルート ディレクトリに基づいているため、画像リソースが正しくロードされていることを確認します。

3. require 関数を使用する

絶対パスと相対パスを使用しても、ローカル パス イメージの読み込みの問題を解決できない場合があります。このとき、uniappが提供するrequire関数を利用することができます。

require 関数の機能は、ローカル パスまたはネットワーク パスからリソースをロードし、リソースのパスを返すことです。 require 関数を使用して、リソースの読み込みが正確であることを確認します。

次は、require 関数を使用してローカル パス イメージをロードする例です:

<template>
  <div>
    <img  src="/static/imghwm/default1.png" data-src="imgUrl" class="lazy" alt="uniapp がローカル パス イメージをロードできない場合はどうすればよいですか?" >
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: &#39;&#39;,
    };
  },
  methods: {
    setImage() {
      this.imgUrl = require(&#39;../image/sample.jpg&#39;);
    },
  },
  mounted() {
    this.setImage();
  },
};
</script>

require 関数はコンパイル段階でのみ使用されるため、使用できないことに注意してください。実行時にリソースを動的にロードします。

4. 静的フォルダーに画像を導入する

uniapp では、画像を静的フォルダーの下に配置し、使用前にページ内の vue ファイルに画像をインポートできます。これには @/static を使用する必要があります。

画像がプロジェクトの静的フォルダーの下の画像フォルダーにあると仮定すると、次のように vue ファイルに導入できます。

<template>
    <img  src="/static/imghwm/default1.png" data-src="require('@/static/image/sample.jpg')" class="lazy" alt="uniapp がローカル パス イメージをロードできない場合はどうすればよいですか?" >
</template>

上記は問題の解決策です。 uniapp がローカル パス イメージをロードできないことを計画します。映像が表示できない事態を避けるために、状況に応じて適切な方法を選択してください。

以上がuniapp がローカル パス イメージをロードできない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。