Не удалось загрузить изображение Vuetify Standard Setup (babel / eslint) - PullRequest
Новая
       32

Не удалось загрузить изображение Vuetify Standard Setup (babel / eslint)

0 голосов
/ 30 августа 2018

Я работаю над проектом VueJS и пытаюсь загрузить изображение на карусель. Я использую стандартную настройку и изображение в папке активов. Я ссылаюсь на URL изображения с

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

Но это выдает ошибку Ошибка загрузки изображения , когда я запускаю сервер, используя npm run serve . 

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>

Если одно из предложений не соответствует конфигурации веб-пакета, я не могу этого найти. Также обратите внимание, что начальное изображение на стартовом шаблоне работало нормально. Но мои пользовательские изображения не работают.

Ответы [ 3 ]

0 голосов
/ 02 октября 2018

Если вам все еще нужна помощь, вы можете попробовать это: 

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

Удачи

0 голосов
/ 03 октября 2018

Модуль vue-loader, используемый vue-cli 3, не может самостоятельно разрешить относительные пути к статическим ресурсам; это нуждается в некоторых подсказках. Ответ Slideman хорош, и предложенный им взлом - именно то, что ожидается от vue-loader за кулисами, чтобы успешно разрешить относительные пути. Просто он не может сделать это сразу же для пользовательских компонентов vue (тегов, которые не являются частью спецификации HTML5).

Я столкнулся с теми же проблемами несколько недель назад и нашел решение, которое я добавил в документацию vuetify (часто задаваемые вопросы, раздел по относительным изображениям, не работающим для пользовательских компонентов). Суть решения заключается в том, что вы можете получить доступ к опции "transformAssetUrls" в vue-loader, используя плагин chainWebpack в файле vue.config.js.

Как вы можете видеть в документации, вы должны перечислить все имена пользовательских компонентов, из которых вы ссылаетесь на статические ресурсы, и имена атрибутов, в которые записаны их относительные пути: 

// 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',
              //...
           }
           }))
 }
   //...
}

Надеюсь, это поможет; если вы не совсем понимаете, не стесняйтесь задавать дополнительные вопросы.

0 голосов
/ 04 сентября 2018
  1. jpg и jpeg были важны для меня. Изображения не загружаются в JPG может работать, если вы даете расширение JPEG. (Я не уверен, как это могло произойти, но это сработало у меня один раз)
  2. вместо src="@/assets/promo1.jpg" src="src/assets/promo1.jpg" сработало у меня в другом случае.

Попробуйте это и дайте нам знать. =)

...