web-dev-qa-db-ja.com

Vue.js 2：Vueは/ assetsフォルダーからファイルを見つけることができません（v-for）

WebpackでVue-cli 3を使用していますが、フォルダー構造は次のようになります。

/public
/src
   /assets
      p1.jpg
      p2.jpg
App.vue
main.js

Webpackが/ assetsがどこにあるかを知るために、JavaScriptランドにいる場合はrequire（）を使用する必要があることをいくつか読んだことがあります。

このコードが機能すると判断しました：

<template>
    <div>
        <ul>
            <li v-for="photo in photos" :key="photo.id">
                <img :src="photo.imageUrls.default" />
            </li>
        </ul>
    </div>
</template>


<script>
    /* For webpack to resolve URLs in javascript during the build, you need the require() function */
    export default {
        data() {
            return {
                photos: [
                    {
                        id: 1,
                        caption: 'P1',
                        series: '',
                        notes: '',
                        imageUrls: {
                            default: require('./assets/p1.jpg')
                        }
                    },
                    {
                        id: 2,
                        caption: 'P2',
                        series: '',
                        notes: '',
                        imageUrls: {
                            default: require('./assets/p2.jpg')
                        }
                    }
                ]
            }
        }
    }
</script>

しかし、これは機能しません。コンソールにエラーが表示されます：「エラー：モジュール './assets/p1.jpg'が見つかりません」

<template>
        <div>
            <ul>
                <li v-for="photo in photos" :key="photo.id">
                    <img :src="imagePath(photo)" />
                </li>
            </ul>
        </div>
</template>


<script>
    /* For webpack to resolve URLs in javascript during the build, you need the require() function */
    export default {
        data() {
            return {
                photos: [
                    {
                        id: 1,
                        caption: 'P1',
                        series: '',
                        notes: '',
                        imageUrls: {
                            default: './assets/p1.jpg'
                        }
                    },
                    {
                        id: 2,
                        caption: 'P2',
                        series: '',
                        notes: '',
                        imageUrls: {
                            default: './assets/p2.jpg'
                        }
                    }
                ]
            }
        },
        methods: {
            imagePath(photo) {
                return require(photo.imageUrls.default);
            }
        }
    }
</script>

2番目の例の何が問題なのかを説明できる人はいますか？ require（）呼び出しをデータに入れることは避けたいです。そのデータはサーバーから来る可能性があり、データにrequire（）呼び出しを入れるのは奇妙に思えます。ありがとう。

編集：以下のEdgarのアドバイスによると、私の画像はアプリではなくサーバーの一部であるため、/ publicフォルダー内のフォルダーに配置するだけで、require（）をまったく処理できません。

javascriptvue.jswebpackvuejs2
5
Stephen

Vue.jsにはパブリックフォルダーがあります。 Vue CLIを使用している場合は、パブリックフォルダーが作成されているはずです。このフォルダーにアセットを配置する必要があります。詳細については、公式の Vue。 jsのドキュメント。

フォルダー構造の例：

/api
/public
/public/assets
/public/favicon.ico
/public/index.html
/src
index.js
app.json

等...

公共の場では、画像、フォント、ファビコン、robots.txt、sitemap.xmlなどの静的アセットを配置できます。

次に、使用するこれらの静的アセットにリンクするには：

テンプレートHTMLで：

<img src="/assets/some-image.svg" alt="Example" />

またはコンポーネントJSで：

array: [
        {
          iconUrl: '/assets/some-image-1.svg',
          label: 'Some Label'
        }
      ]

それ以外の場合は、他の誰かがすでに言っているように、requireフォルダーからプルされているため、srcを使用する必要があります。しかし、おそらくそれらをそこに置く本当の理由はないので、/public/フォルダーをお勧めします。

10
Edgar Quintero

リソースはクライアントにバンドルされているため、requireが必要です。

サーバー上のリソースが必要な場合は、public folder代わりに。

よくあるもう1つの問題は、コンポーネントがコンポーネントフォルダーにある場合です。その場合は、以下をお試しください。

default: require('../assets/p1.jpg')
3
Steven Spungin

この質問は、あなたが検索できる一般的な問題だと思います。解決策は、リソースファイルを静的ディレクトリに配置することです。アセットフォルダー内のファイルはwebpackによって処理されるため、htmlモジュールに問題はありませんが、コードモジュールに問題があります。

1
kaluogh