Vue js 图像 v-bind src 在使用 axios 从 API 调用接收动态值时由于路径不正确而无法正常工作

Question

我在显示图像时遇到问题，我想从 SQL 数据库中获取这些图像的路径，然后将它们显示在我的网站项目中。这是我试图让它工作的方式：

<div class="imagesInQuestion">
  <img class="inlineImages" :src="testItem.pictureLink" />
</div>

在 testItem.pictureLink 中我有这个字符串 "@/assets/b1q2v1.png"

这不起作用，因为图像的路径发生了变化。在开发人员选项的网络选项卡中，请求 URL 更改为

localhost:8080/courses/tests/@/assets/b1q2v1.png

然后当我在没有 v-bind 的情况下手动输入字符串时：

<div class="imagesInQuestion">
  <img class="inlineImages" src="@/assets/b1q2v1.png" />
</div>

图片是根据URL

的请求显示的

localhost:8080/img/b1q2v1.2aa65ed1.png

我试过

这样的解决方案

<div class="imagesInQuestion">
  <img
    class="inlineImages"
    :src="required(testItem.pictureLink)"
  />
</div>

但是不行，错误是：

Error: Cannot find module '@/assets/b1q2v1.png'

如何正确地将 src 属性绑定到我的动态图片路径？

Answer 1

您可以将 pictureLink 更改为一个名称：

testItem.pictureLink = 'b1q2v1'

然后创建获取图像的方法：

methods: {
  getImage(img) {
    return require(`@/assets/${img}.png`);
  }
}

并从模板调用该方法：

<img class="inlineImages" :src="getImage(testItem.pictureLink)" />

Vue js image v-bind src not working because of incorrect path when receiving the dynamic value from an API call wiht axios