web-dev-qa-db-ja.com

Vuetify Standard Setup（babel / eslint）画像の読み込みに失敗しました

私はVueJSプロジェクトで作業していて、カルーセルに画像をロードしようとしています。標準セットアップを使用しており、画像をアセットフォルダーに入れています。画像のURLを参照する

<v-carousel-item src="@/assets/promo1.jpg">

しかし、これはnpm run serveを使用してサーバーを実行すると、Image Load Failedエラーをスローします。

console.js?66f6:36 [Vuetify] Image load failed

src: @/assets/promo1.jpg

found in

---> <VImg>
       <VCarouselItem>
         <VCarousel>
           <Home> at src/views/Home.vue
             <VApp>
               <App> at src/App.vue
                 <Root>

提案の1つがwebpack設定をいじっていると、私はそれを見つけることができないようです。また、スターターテンプレートの初期画像は問題なく機能したことにも注意してください。しかし、カスタムイメージが機能しません。

urlvue.jswebpackvuetify.jsvue-cli-3
4
VihanAgarwal

それでも助けが必要な場合は、これを試すことができます：

<script>
export default {
  data() {
    return {
      items: [
        {src: require('@/assets/img1.jpg')},
        {src: require('@/assets/img.jpg')}
      ]
    }
  }
}
</script>

そして使用：

<v-carousel>
    <v-carousel-item
    v-for="(item,i) in items"
    :key="i"
    :src="item.src"></v-carousel-item>
</v-carousel>

幸運を

6
Sildeman Dourado Araújo

Vue-cli 3で使用されるvue-loaderモジュールは、それ自体では静的アセットへの相対パスを解決できません。ヒントが必要です。 Slidemanの答えは適切で、彼が提案するハックは、相対パスを正常に解決するために舞台裏でvue-loaderが行うことが期待されていることとまったく同じです。カスタムvueコンポーネント（HTML5仕様の一部ではないタグ））をすぐに実行できないというだけのことです。

数週間前に同じ問題に直面し、vuetifyの documentation に追加した解決策を見つけました（FAQ、相対画像に関するセクションがカスタムコンポーネントで機能しない）。ソリューションの要点は、vue.config.jsファイルのchainWebpackプラグインを使用して、vue-loaderの「transformAssetUrls」オプションにアクセスできることです。

ドキュメントでわかるように、静的アセットを参照するすべてのカスタムコンポーネント名と、相対パスが記述されている属性の名前をリストする必要があります。

// vue.config.js
module.exports = {
 chainWebpack: config => {
   config.module
     .rule('vue')
     .use('vue-loader')
     .loader('vue-loader')
     .tap(options => Object.assign(options, {
           transformAssetUrls: {
              'v-img': ['src', 'lazy-src'],
              'v-card': 'src',
              'v-card-media': 'src',
              'v-responsive': 'src',
              'v-carousel-item': 'src',
              //...
           }
           }))
 }
   //...
}

それが役に立てば幸い;完全に理解していない場合は、遠慮なく追加の質問をしてください。

4
uribalb
  1. jpgおよびjpegは私にとって重要でした。拡張子jpegを指定すると、画像がjpgで読み込まれない場合があります。 （それがどのようにして起こるかはわかりませんが、それは私に一度働いた）
  2. の代わりに src="@/assets/promo1.jpg"src="src/assets/promo1.jpg"別のケースで私を助けました。

このことを試して、私たちに知らせてください。 =）

2
Pathum Kalhan