viteでVue3を使用して画像を動的に表示させたい

Question

実現したいこと

別ファイルの画像をvueコンポーネントで動的表示させる

前提

Laravel9のViteを使用しています
画像のフォルダはプロジェクトの

問題

画像もエラーメッセージも表示されない

ソース

<template>
    <img :src="imageUrl" alt="" />
</template>

<script>
import imagelist from '../image.js';

export default {
    setup() {
        const imageUrl = new URL(`/test_image/${name}.png`, import.meta.url)
        var name = imagelist.imageList() 
        console.log(name)
        return imageUrl
    }
}
</script>

function imageList() {
    const image = [
        "test-img01"
        ]
    return image[0]
}

export default {
    imageList,
}

試したこと

Viteではrequire()が使えないので下記の解決方法を試しました。
https://stackoverflow.com/questions/66419471/vue-3-vite-dynamic-image-src

ご教授頂けると幸いです。

Comments

[rykss]

`sample.vue`の10行目にてname変数を定義する前に使ってしまっているので11行目と入れ替えるみるとどうでしょうか

Answer 1

こんにちは,
Vueコンポーネントで別ファイルの画像を動的に表示するためには、いくつかの修正が必要です。以下に修正点を示します。only up

image.js ファイルの imageList 関数が正しくエクスポートされるようにするため、以下のように修正します。

javascript
export function imageList() {
  const image = [
    "test-img01"
  ];
  return image[0];
}

sample.vue ファイルで imageUrl を返す代わりに、name の値を setup 関数内で取得し、imageUrl を計算プロパティとして定義します。また、import.meta.url を使用するために、<script setup> を使用します。

html
<template>
    <img :src="imageUrl" alt="" />
</template>

<script setup>
import { ref } from 'vue';
import { imageList } from '../image.js';

const name = imageList();
const imageUrl = new URL(`/test_image/${name}.png`, import.meta.url);

export { imageUrl };
</script>

これにより、sample.vue コンポーネント内で imageUrl を使用して画像を表示することができます。ただし、フォルダのパスや画像の実際のパスが正しいことを確認してください。また、画像が存在しない場合やパスに誤りがある場合、エラーメッセージが表示される可能性がありますので、デベロッパーツールのコンソールを確認してください。