Как прочитать локальный текстовый файл в методе компонента в vue 3?

Question

Я пытаюсь, написать метод, который будет считывать svg из файла:

data(){
return {
  svg: "",
}
},
methods: {
getSvg(filename){
const fs = require('fs')
if (fs.existsSync(__dirname+filename)){
          this.svg = fs.readFileSync(__dirname+filename).toString()
      }
else{
   this.svg = fs.readFileSync(__dirname+"notfound.svg").toString()
}}}

<template>
<div v-html="svg"></div>
</template>

Но fs работает только на сервере, поэтому код не работает. Подскажите, пожалуйста, как это сделать на vue.js? И в какой папке размещать svg-файлы, чтобы они были доступны для чтения?

Answer 1

Можно разместить svg файлы в public директории, а затем с помощью axios их получать:

axios.get('http://localhost:8080/my.svg')
        .then(response => {
          this.svg = response.data
        })
        .catch(() => {
          axios.get('http://localhost:8080/notfound.svg')
              .then(response => {
                this.svg = response.data
              })
        })

БЛОГ НА HUSL

Как прочитать локальный текстовый файл в методе компонента в vue 3?

Ответы (1 шт):