您的位置:

使用Vue引入SVG图片

一、使用Vue引入SVG图片

在Vue中,我们可以使用标签或background属性来引入一个SVG图片。从Vue Loader 14.0.0开始,Vue Loader支持用import语句引入SVG文件。这个语法需要在项目中安装svg-sprite-loader。

首先需要安装svg-sprite-loader:

npm install svg-sprite-loader --save-dev

接着,新建一个Vue组件,命名为MyComponent.vue:

<template>
  <img src="./assets/logo.svg" alt="logo">
</template>

<script>
import logo from './assets/logo.svg';

export default {
  name: 'my-component',
  data() {
    return {
      logo
    };
  }
};
</script>

可以看到,在这个Vue组件中,我们使用import语句引入了"./assets/logo.svg"文件,并将其设置为了数据data中的一个属性“logo”。在模板template中,我们直接使用了标签来展示logo图片。这样就完成了一个使用Vue引入SVG图片的场景。

二、使用Vuerequire引入SVG图片

在Vue中使用vuerequire引入SVG图片要实现的功能和使用Vue引入SVG图片是一样的,只是实现方式不同。Vuerequire是一个webpack-loader,它的作用是把一个SVG文件转化成一个Vue组件。使用这个组件可以轻松地在一个Vue应用中使用SVG图标。

首先需要在项目中安装vuerequire-loader:

npm install vuerequire-loader --save-dev

接着,新建一个SVG文件:logo.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200">
  <path d="M59.304,153.923c0-26.711,21.603-48.315,48.315-48.315 c26.711,0,48.315,21.603,48.315,48.315v780.43c0,26.711-21.604,48.315-48.315,48.315c-26.712,0-48.315-21.604-48.315-48.315V153.923z M283.056,900.959l308.623-352.479l-308.623-352.479 C265.527,159.064,256,170.504,256,187.346v738.309 C256,929.496,265.526,940.936,283.056,900.959z M947.373,153.923 c0-26.711,21.603-48.315,48.315-48.315c26.711,0,48.315,21.603,48.315,48.315v780.43c0,26.711-21.604,48.315-48.315,48.315c-26.712,0-48.315-21.604-48.315-48.315V153.923z"/>
</svg>

然后,在Vue组件中通过import引入logo.svg文件,然后在template中使用<svg-icon>组件来使用这个logo 图标:

<template>
  <svg-icon :icon="logo"/>
</template>

<script>
import logo from './logo.svg';

export default {
  name: 'my-component',
  data() {
    return {
      logo
    };
  }
};
</script>

在这个Vue组件中,我们使用import语句引入了"./logo.svg"文件,并将其设置为了数据data中的一个属性“logo”。在模板template中,我们使用了<svg-icon>组件并通过:icon属性来指定了logo图标。这样就完成了一个使用vuerequire引入SVG图片的场景。

三、一些注意事项

在使用Vue引入SVG图片或者使用vuerequire引入SVG图片时,需要注意以下几点:

1.确认SVG图片是可以在浏览器中正确显示的。一些SVG图片可能存在不准确的标记或不完整的结构,这会导致浏览器无法正确地渲染图片的一部分或全部内容。

2.确保SVG图片的属性设置正确。在使用SVG图片时,需要注意一些重要的属性设置,比如viewBox、preserveAspectRatio、width和height等。这些属性设置会影响图片的渲染效果和展示方式。

3.使用import语句时,需要导入.svg文件,而不是引用.js或其他不合适的文件。如果导入了错误的文件,可能会导致应用程序无法编译或启动。

4.在template中使用<img>标签或background属性时,需要使用require语句。

5.使用Vue中的动态组件时,需要使用is属性来指定要引用的组件名称。