Vue.js | webpack：无法将“资产”文件夹中的图像加载到“ vue组件”中

Question

如何将资源文件夹中的图像加载到vue组件？

这是我的“ Card.vue”组件

<template>
  <div class="container">
    <div class="card" style="width: 18rem;">

     <!-- this <img> tag needs to load image from the assets folder -->
      <img :src="logo" class="card-img-top" alt="...">

      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example......</p>
    </div>
  </div>
</div>
</template>

这是“ Card.vue”组件的脚本

<script>
export default {
 data() {
     logo: require('@/assets/images/1.jpg')
}
}
</script>

我已经尝试了许多方法来将图像加载到资源文件夹中，但是每次都会不断发布相同的错误。

错误代码：

*ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/card.vue
Module not found: Error: Can't resolve '@/assets/images/1.jpg'in 'e:\OTHERS\work\SIYASAWEB\siyasa-web-master\src\components'
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/card.vue 19:10-42
 @ ./src/components/card.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js*

这是项目树结构

Answer 1

您需要一个可以处理图像的加载器。与使用 babel-loader 的其他加载器相比， URL-loader 效果很好。

改编自url-loader docs：

$ npm install url-loader --save-dev

更改 Card.vue 组件的 script 标签：

<script>
import logo from '../assets/images/1.jpg';

export default {
    data() {
        return {
            logo
        }
    }
}
</script>

在 Card.vue 的 HTML 中：

<img :src="logo" class="card-img-top" alt="...">

将加载程序规则添加到您的 webpack.config.js ：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
          },
        ],
      },
    ],
  },
};