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

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>

但是不起作用，错误是：

错误：找不到模块“@/assets/b1q2v1.png”

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

Answer 1

您可以将 pictureLink 更改为名称：

testItem.pictureLink = 'b1q2v1'

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

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

并从模板调用该方法：