vue中图片加载不出来的问题及解决

针对“Vue中图片加载不出来的问题及解决”的问题，我们可以从以下几个方面来探讨：

问题描述

在 Vue 项目中，我们通常都会使用 <img> 标签或 background-image 样式来加载图片资源。但是在实际开发中，偶尔会遇到图片无法加载的情况，此时需要对图片加载不出来的问题进行解决。

解决方法

1. 相对路径和绝对路径

首先要确保图片的路径是正确的，即相对路径或绝对路径都必须正确指向图片资源。通常，我们在引用图片资源时，相对路径是指相对于当前文件的路径，而绝对路径则是指相对于根目录的路径。如果图片的路径不正确，就会导致图片无法加载。

示例1：相对路径引用图片资源

<!-- index.vue 文件中使用相对路径引用图片 -->
<template>
  <div>
    <img src="./images/logo.png" alt="logo">
  </div>
</template>

// 在 index.vue 文件所在的目录下，有一个 images 目录，里面有一个名为 logo.png 的图片文件

示例2：绝对路径引用图片资源

<!-- index.vue 文件中使用绝对路径引用图片 -->
<template>
  <div :style="{ backgroundImage: 'url(/images/bg.jpg)' }"></div>
</template>

// 在 public 目录下有一个名为 images 的目录，里面有一个名为 bg.jpg 的图片文件

2. Webpack 加载器

如果图片资源的路径是正确的，但仍然无法加载图片，那么就需要考虑使用 Webpack 加载器来解决这个问题。

2.1：file-loader 加载器

file-loader 会将打包后的文件，以文件名的形式输出到输出目录中，这个文件名由 [hash].[ext] 组成，其中 hash 是一串hash值，ext 是文件扩展名。

npm install file-loader --save-dev

在 webpack.config.js 中的 module.rules 添加以下配置：

module.exports = {
  // ...其它配置项
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'file-loader',
        options: {
          limit: 10000, // 限制转化成base64的图片大小
          name: 'img/[name].[hash:8].[ext]', // 打包后的图片名称，8位hash值
        }
      },
      // ...其它加载器配置。比如 style-loader 和 css-loader。
    ]
  }
  // ...其它配置项
}

在.vue 文件中引用图片时，可以使用以下方式：

<template>
  <!-- 使用require()引入本地图片 -->
  <img :src="require('./images/logo.png')">
</template>

<style>
  /* 使用背景图片时同样使用require()引入 */
  .bg {
    background: url(~@/assets/img/bg.png)
  }
</style>

2.2 url-loader 加载器

url-loader 实际上是对file-loader的封装。url-loader 的作用是将文件以 base64 的形式打包进 js 文件中，从而避免了向服务器请求资源的过程，减轻了服务器的负担。

npm install url-loader --save-dev

在 webpack.config.js 中的 module.rules 添加以下配置：

module.exports = {
  // ...其它配置项
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000, // 限制转化成base64的图片大小
          fallback: 'file-loader', // 超过10000byte，还要用 file-loader 做一次处理
          name: 'img/[name].[hash:8].[ext]', // 打包后的图片名称，8位hash值
        }
      },
      // ...其它加载器配置。比如 style-loader 和 css-loader。
    ]
  }
  // ...其它配置项
}

在vue文件中引用图片时，可以使用以下方式：

<template>
  <!-- 使用require()引入本地图片 -->
  <img :src="require('./images/logo.png')">
</template>

<style>
  /* 使用背景图片时同样使用require()引入 */
  .bg {
    background-image: url(~@/assets/img/bg.png)
  }
</style>

总结

通过上述方法，我们可以有效解决Vue中图片无法加载的问题。在使用图片资源时，需要注意图片路径是否正确，如果图片路径没有问题，那么可以尝试使用file-loader和url-loader来解决这个问题。