импортировать SVG-файл из локального каталога без использования vue -svg-loader - PullRequest
Новая
       54

импортировать SVG-файл из локального каталога без использования vue -svg-loader

0 голосов
/ 26 апреля 2020

Я просто хочу знать, возможно ли импортировать файл svg из локальной папки в файл ". vue". 

--home directory
  --> page.vue
  --> svg-directory
      --> svgFile.svg

Я хочу импортировать svgFile.svg на внутренней странице. vue, делая что-то вроде: 

import ....

или: 

<img src="./svg-directory/svgFile.svg" />

или что-то еще.

спасибо за помощь

1 Ответ

0 голосов
/ 26 апреля 2020

Vue использует webpack в качестве компоновщика ресурсов.

Webpack требуется загрузчик для каждого типа файла, который он обрабатывает. К счастью, вам не нужно писать каждый загрузчик, так как он предварительно настроен для наиболее распространенных типов. Однако .svg не является одним из предварительно настроенных.

Если вы хотите загрузить .svg s в веб-пакете, вы должны научить веб-пакет, как обращаться с этими файлами, и это именно то, что vue-svg-loader или svgo-loader делает.
Очевидно, вы не Я должен их использовать. Вы всегда можете написать свой собственный загрузчик.

Если вы не хотите писать какой-либо загрузчик, вы можете воспользоваться vue-loader, который уже присутствует в приложении vue. Просто оберните <svg> в тег <template> и сохраните его как .vue: 

<template>
  <svg>...</svg>
</template>

Теперь вы можете импортировать и использовать его так же, как любой другой компонент.

Это также имеет преимущество наличия встроенного <svg>, что означает, что он может наследовать currentColor, чтобы вы могли легко анимировать его цвет (чего нельзя, когда он загружен как <img>).

Посмотрите, как это работает здесь: https://codesandbox.io/s/hopeful-lamarr-qjvkm?file= / src / App. vue

Если вы хотите автоматизировать его и не нужно оборачивать все svgs в теги <template> и сохраните их как .vue, вот статья, объясняющая, как вы могли бы это сделать: https://codeburst.io/managing-svg-images-in-vue-js-applications-88a0570d8e88 с помощью этого загрузчика: 

import Vue from 'vue';
const requireTemplate = require.context( '.?vue-template', false, /\.svg$/ );
context.keys().forEach( fileName => {
  const name = 'Svg' + fileName.replace( /^\.\//, '' )
    .replace( /\.svg$/, '' ) );
  const withRender = requireTemplate( fileName );
  const component = withRender( {} );
  Vue.component( name, component );
});

Теперь вы можете импортировать любые .svg как вам импортирует компонент .vue и использует его как компонент.

...