Vue/Javascript插值问题

我试图在Vue中插入

photo

的值。以下是组件：

解释：我们将数据集定义为空。然后，我们执行一个post方法到后端数据库，在那里我们可以得到

照片、电子邮件、姓名和
id
。在
photo
值之前，一切正常。如您所见，我对字符串执行了一个slice方法，该方法删除了不必要的数据。这个的输出只是文件名

<script>

export default {
  data() {
    return {
      photo: null,
      email: null,
      name: null,
      id: null
    };
  },
 created() {
this.axios
      .post("http://127.0.0.1:8000/api/auth/me", "body", {
        headers: axiosHeader
      })
      .then(response => {
        console.log(response.data);
        this.name = response.data.name;
        this.email = response.data.email;
        this.id = response.data.id;
        this.photo = "@/photodatabase/" + response.data.photo.slice(37, 56);
        console.log(this.photo);
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

图像没有显示。当我检查元素时，您可以在img标签上看到值是
@/photodatabase/041120_09_24_03.jpg
，这是正确的值

我试着这样插值：

<img v-else-if="photo != null" :src="`${photo}`"     
    height="200px" width="200px" />

<img
          v-else-if="photo != null"
          src="@/photodatabase/041120_09_24_03.jpg"
          height="200px"
          width="200px"
        />

然后它就起作用了。我在这里遗漏了什么？
因为动态图像是src
照片必须是绝对URL，如：
http://127.0.0.1:8000/photodatabase/041120_09_24_03.jpg
或

如果在同一服务器中

/photodatabase/041120_09_24_03.jpg

或者您可以在响应时轻松发送绝对URL。
因为是动态图像src
照片必须是绝对URL，如：
http://127.0.0.1:8000/photodatabase/041120_09_24_03.jpg
或

如果在同一服务器中

/photodatabase/041120_09_24_03.jpg

或者，您可以在响应时轻松发送绝对URL。
我认为这不是正确的URL
@/photodatabase/041120\u 09\u 24\u 03.jpg

你写了“它仍然不工作”，所以你得到了“404未找到”错误

该链接应指向您的后端（静态资产或Laravel控制器）。
@
在编译期间由Webpack重写到您的公共url-它在运行时不会作为动态路径工作

此代码



…应该在编译后变成其他东西。检查一下。
可能是这样的：



因此，如果您没有在
vue router
中映射
@
，也没有在Laravels
routes
中映射，那么您应该更改该链接中的
@
。你可以简单地试试
/photodatabase/041120\u 09\u 24\u 03.jpg
我相信这不是正确的URL
@/photodatabase/041120\u 09\u 24\u 03.jpg

你写了“它仍然不工作”，所以你得到了“404未找到”错误

该链接应指向您的后端（静态资产或Laravel控制器）。
@
在编译期间由Webpack重写到您的公共url-它在运行时不会作为动态路径工作

此代码



…应该在编译后变成其他东西。检查一下。
可能是这样的：



因此，如果您没有在
vue router
中映射
@
，也没有在Laravels
routes
中映射，那么您应该更改该链接中的
@
。您可以简单地尝试使用require处理程序

<img v-else-if="photo != null" :src="require(${photo})"     
    height="200px" width="200px" />

尝试使用require处理程序

<img v-else-if="photo != null" :src="require(${photo})"     
    height="200px" width="200px" />


能否显示相应的
v-if
？@pacholamit！如果我的答案对你有用，你也很开心，那么一般来说你会接受这个答案。这不仅有助于解决同一问题的其他人，也意味着人们将来更有可能在你遇到的任何其他问题上帮助你。您可以在这里阅读关于接受的内容：stackoverflow.com/help/accepted-answer您可以显示相应的
v-if
？@pacholamit！如果我的答案对你有用，你也很开心，那么一般来说你会接受这个答案。这不仅有助于解决同一问题的其他人，也意味着人们将来更有可能在你遇到的任何其他问题上帮助你。您可以在这里阅读关于接受的内容：stackoverflow.com/help/accepted answer如果我在控制台中也没有遇到问题，请参阅下面的图片。没有错误。我做了各种检查。控制器没有任何问题，因为当我通过邮递员发出同样的请求时，它工作正常。它与我认为的语法或v-bind有关。因为如果我不进行v-bind，我只是直接复制粘贴链接到src道具。你用了什么网址邮递员？因为
@/photodatabase/041120_09_24_03.jpg
只是一个拖尾部分，我认为问题在于路由器无法解决的开头…？不，你在某种程度上是对的。这和网页包有关。我用
require（）
命令修复了它。哈哈。谢谢你给我指出了正确的方向。如果我在控制台上也没有问题，这里有一张照片。没有错误。我做了各种检查。控制器没有任何问题，因为当我通过邮递员发出同样的请求时，它工作正常。它与我认为的语法或v-bind有关。因为如果我不进行v-bind，我只是直接复制粘贴链接到src道具。你用了什么网址邮递员？因为
@/photodatabase/041120_09_24_03.jpg
只是一个拖尾部分，我认为问题在于路由器无法解决的开头…？不，你在某种程度上是对的。这和网页包有关。我用
require（）
命令修复了它。哈哈。谢谢你给我指明了正确的方向。