Question

我正在研究VueJS项目，并试图将图像加载到轮播上。我正在使用标准设置，并且图像在资产文件夹中。我用

引用图像网址

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

如果其中一项建议弄乱了webpack配置，我似乎找不到。另外，请注意，入门模板上的初始图像运行良好。但是我的自定义图像不起作用。

Answer 1

如果您仍然需要帮助，可以尝试以下操作：

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

祝你好运

Answer 2

vue-cli 3使用的vue-loader模块本身无法解析到静态资产的相对路径；它需要一些提示。 Slideman的回答很好，他建议的破解正是vue-loader希望在幕后为成功解析相对路径所做的事情。只是对于定制vue组件（不属于HTML5规范的标签），它无法立即实现。

几周前，我遇到了同样的问题，找到了一个解决方案，该解决方案已添加到vuetify的documentation中（常见问题，有关相对图像不适用于自定义组件的部分）。解决方案的要点是，您可以使用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',
              //...
           }
           }))
 }
   //...
}

希望它会有所帮助；如果您不完全了解，请随时询问其他问题。

Answer 3

jpg 和 jpeg 对我来说很重要。如果指定扩展名jpeg，则无法在jpg中加载图片。（我不确定这怎么会发生，但是一次成功了）
在另一种情况下代替了src="@/assets/promo1.jpg" src="src/assets/promo1.jpg"使我工作。

尝试一下，让我们知道。 =）

Vuetify Standard Setup（Babel / Eslint）图像无法加载

3 个答案: