为什么Vue无法从本地主机解析映像？

提问者：小点点

作为vue的后端。js I使用laravel（端口8000）

在我的数据库中，我有用户及其配置文件照片的名称（this.user.photo）。

所以，我想展示这张照片。

<img :src="require(`http://localhost:8000/images/${this.user.photo}`)" alt="Profile Photo">

当我去http://localhost:8000/images/1.png我实际上看到了图像，但是Vue说：

未找到模块：错误：无法解析'http://localhost:8000'

PS：console.log（this.user.photo）输出1.png

UPD：我见过很多解决方案，像这样或这样，但它们都不起作用

共3个答案

匿名用户

看起来您的映像已经托管在服务器上，并且在生成过程中未绑定它们。在这种情况下，您不需要使用require，而直接将模板中的图像引用为

<img :src="'http://localhost:8000/images/' + user.photo" alt="Profile Photo">

请记住，require是webpack提供的一种方法，用于在构建过程中解析依赖性URL，这样您就不必担心绝对URLrequire帮助我们参考与模块相关的URL，这些模块在构建期间由webpack解析。

简而言之，当Vue项目模块中有静态资产时，请使用require

匿名用户

如果映像不在公共路径中，则可以使用path直接调用该映像

 <img :src=`../../images/${user.photo}` alt="Profile Photo">

这将在编译JS和图像公共路径将自动添加的路径中构建镜像。

如果试图从公共路径添加图像，可以在数据部分初始化原始路径并调用图像，如下所示

data:()=>{
  return {
    path: document.location.origin
  }
}

<img :src=`${path}/images/${user.photo}` alt="Profile Photo">

注意：您不需要在模板部分中使用此。

匿名用户

您应该使用require并指向图像。

确保路径相对于使用它的模块。