Vue 项目中使用相对路径引入 SVG 图片：详细步骤及代码示例

本文将详细介绍如何在 Vue 项目中使用相对路径引入 SVG 图片，并提供代码示例和注释，帮助你轻松实现 SVG 图片的引入和使用。

1. 安装 svg-loader

首先需要安装 svg-loader，可以使用 npm 进行安装：

npm install svg-loader --save-dev

2. 在组件中引入 SVG 文件

在 Vue 组件中，可以使用 `import` 方式引入 SVG 文件：

<template>
  <div>
    <img :src="map" alt="svg map">
  </div>
</template>

<script>
import map from '@/assets/svgmap.svg'

export default {
  name: 'SvgMap',
  data () {
    return {
      map: map
    }
  }
}
</script>

3. 配置 Webpack

在 Webpack 配置文件中，需要添加 svg-loader 的配置：

module.exports = {
  module: {
    rules: [
      {
        test: /.svg$/,
        loader: 'svg-loader'
      }
    ]
  }
}

4. 组织 SVG 文件

建议将 SVG 文件放在 `assets` 文件夹下的 `svg` 文件夹中，然后在组件中使用相对路径引用：

import map from '@/assets/svg/svgmap.svg'

注意

使用 svg-loader 时，Webpack 会将 SVG 文件转换为模块化的代码。你可以将 SVG 文件作为图片使用，也可以将其作为组件使用。在上述示例中，我们将 SVG 文件作为图片使用，将其作为 `img` 标签的 `src` 属性值。