5

我正在开发一个 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 配置有关，我似乎找不到。另外，请注意，入门模板上的初始图像工作正常。但是我的自定义图像不起作用。

4

3 回答 3

9

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

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

祝你好运

于 2018-10-01T22:52:53.343 回答
4

vue-cli 3 使用的 vue-loader 模块无法自行解析静态资源的相对路径；它需要一些提示。Slideman 的回答很好，他建议的 hack 正是 vue-loader 为了成功解析相对路径而在幕后所做的。只是它不能立即为自定义 vue 组件（不属于 HTML5 规范的标签）做这件事。

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

希望能帮助到你; 如果您不完全理解，请随时提出其他问题。

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

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

于 2018-09-04T04:06:32.440 回答