从 Vuejs 和 Nodejs 中的文件夹和数据库中获取图像

Question

This is my fetch Api, In the data which was fetch by the code below I have a picture name saved into the database

async mounted() {
const id = this.$route.params.id;
this.profiles = (await this.$api.get(`/profile/${id}`)).data;
},

file: "\"2021-09-17T15-06-07.540Z-phenell logo white.png\"" //The picture name in database while the image it self is saved into a folder in my backend folder. Am using quasar (Vuejs) for fontend and Expressjs for backend. 

所以我试图从文件夹中获取图像并将其与数据库中的名称连接起来。

app.use(express.static(path.join(__dirname, 'public'))); //I already set my static folder.

我要获取的 VueJs 代码

      <div class="host text-center"> 
          <img class="profile-user-img img-fluid img-circle" :src="getProfilePhoto()" alt="User profile picture">
      </div>

methods: {
 getProfilePhoto() {
    return "http://localhost:8081/public/images/"+this.profiles.file
 }

},

但是我得到一个 404 Not found 的错误

http://localhost:8081/public/images/undefined 404（未找到） http://localhost:8081/public/images/%222021-09-17T15-06-07.540Z-phenell%20logo%20white.png

Answer 1

试试这个方法：

getProfilePhoto() {
  return require(`http://localhost:8081/public/images/${this.profiles.file}`)
}