Vuetify 标准设置（babel/eslint）图像加载失败

Question

我正在开发一个 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>

如果其中一个建议与 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

1. jpg 和 jpeg 对我来说很重要。如果您提供扩展名 jpeg，则无法在 jpg 中加载的图像可能会起作用。 （我不知道这是怎么发生的，但它曾经对我有用）
2. 而不是 src="@/assets/promo1.jpg" src="src/assets/promo1.jpg" 在另一种情况下为我工作。

试试这些东西并告诉我们。 =)

Answer 3

vue-cli 3 使用的 vue-loader 模块无法自行解析静态资源的相对路径；它需要一些提示。 Slideman 的回答很好，他建议的 hack 正是 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',
              //...
           }
           }))
 }
   //...
}

希望对您有所帮助；如果您不完全理解，请随时提出其他问题。