Html Vue.js“网页包：无法在”中加载图像；“资产”；将文件夹放入'；vue组件'；

如何将资源文件夹中的图像加载到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>

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

这是项目树结构

---

您需要一个能够处理图像的加载程序url加载器在使用巴别塔加载器时，与其他加载器相比运行良好

改编自：

更改卡的脚本标记。vue组件：

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

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

---

你试过相对路径吗？这里有一些方法可以做到这一点：这就成功了！

$ npm install url-loader --save-dev

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

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

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

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