从 api 在 vue 前端动态显示图像

Question

我正在尝试根据 api 调用给出的路径动态显示图像。所有其他数据都正确显示，但不是图像。我怀疑我没有输入正确的路径。前端位于名为client 的文件夹中，图像位于cms 文件夹的子目录中，与client 位于同一目录中。

前端：root/client/src/components/Arrangements.vue

图片：root/cms/public/uploads/some-image.png

这是我的代码：

模板

    <div v-if="arrangements.length">
        <div :key="arrangement.index" v-for="arrangement in arrangements">
            <img :src="getImages(arrangement.img.formats.thumbnail.url)" alt="">
            <p>{{ `${arrangement.title}` }}</p>
            <p>{{ `$${arrangement.price}` }}</p>
        </div>
    </div>

脚本

    import axios from "axios";
    
    export default {
        data() {
            return {
                arrangements: []
            }
        },
        mounted() {
            axios.get("http://localhost:1337/arrangements")
                .then(res => {
                    this.arrangements = res.data;
                })
                .catch(error => {
                    this.error = error;
                })
        },
        methods: {
            getImages(url) {
                return '/cms/public' + url;
            }
        }
    }

API 调用

编辑：

项目结构

我试图访问图像的前端代码是Arrangements.vue，而图像在cms/public/uploads中

Answer 1

您需要使用 require 来获取图像。试试这个方法。

在你的情况下，你可以使用这种方式。

 getImages(url) {
      return require('../../../cms/public/' + url);
  }

注意：我认为您的图像路径是正确的。我习惯使用变量 @ 来访问 assets 文件夹，类似这样：

<img :src="require('@/assets/img/my_image.png')" />

Answer 2

试试这个

computed：{
 getImages(){
  var filename = this.arrangements
  return require(`/cms/public/${fileName}.png`);
 }
}

你必须把它放在计算中，这样当图像路径进来时它会重新加载图像，然后用 :src="getImages" 绑定它。