为什么Vue无法解析来自本地主机的图像? [英] Why Vue can't resolve image from localhost?

问题描述

作为vue.js的后端，我使用laravel(端口8000)

As a back-end for vue.js I use laravel (port 8000)

在我的数据库中，我有用户及其名字的个人资料照片( this.user.photo ).

In my db I have the user and the name of it's profile photo (this.user.photo).

所以，我想显示这张照片.

So, I want to show this photo.

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

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

When I go to http://localhost:8000/images/1.png I actually see the image, but the Vue says:

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

Module not found: Error: Can't resolve 'http://localhost:8000'

PS: console.log(this.user.photo)输出 1.png

UPD:我见过许多解决方案，例如此或此，但它们不起作用

UPD: I've seen many solutions, like this or this, but they do not work

推荐答案

看起来您的图像已经托管在服务器上，并且您在构建过程中未将其捆绑在一起.在这种情况下，您无需使用 require 并将模板中的图像直接引用为

Looks like your images are already hosted on the server and you are not bundling them during build. In this case, you need not use require and directly refer to your images in the template as

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

请记住， require 是webpack提供的一种方法，用于在构建过程中解析您的从属URL，这样您就不必担心绝对URL了. require 帮助我们引用与Webpack在构建过程中解析的模块相关的URL.

Remember that require is a method provided by webpack to resolve your dependancy URLs during build such that you need not worry about the absolute URLs. require helps us refer to URLs relative to the modules which are resolved by webpack during build.

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

In short, use require when you have static assets inside your Vue project module

这篇关于为什么Vue无法解析来自本地主机的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！