Vuetify 标准设置 (babel/eslint) 图片加载失败

Question

我正在处理一个 VueJS 项目，并试图在轮播中加载图像。我正在使用标准设置并将图像放在资产文件夹中。我用

引用图像 URL

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

但是当我运行服务器使用 npm 运行 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

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

试试这个，让我们知道。 =)

Answer 2

如果您仍然需要帮助，可以试试这个：

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

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

Vuetify 标准设置 (babel/eslint) 图片加载失败

Vuetify Standard Setup (babel/eslint) image failed to load

url

webpack

vue.js

vuetify.js

vue-cli-3