动态img src，并连接到vue.js

Question

我想使用vue.js框架显示图像html，该URL包含一个绝对路径，而另一个相对路径取决于对象。

我尝试了两种行为异常的东西：

第一

声明此内容：

<img src="../assets/items/public/jeune.png" height="50" width="50" alt="logo"></img>

并将其渲染：

<img src="imgs/jeune--public.png" height="50" width="50" alt="logo">

显示效果好，可以正确显示我的图像

秒

imgPreUrl: '../assets/'
objPublicSelected.logo = items/public/jeune.png

声明此内容：

<img :src="imgPreUrl + objPublicSelected.logo" height="50" width="50" alt="logo"></img>

并将其渲染：

<img src="../assets/items/public/jeune.png" height="50" width="50" alt="logo">

显示结果很差，无法显示任何图像。但是奇怪的是，URL很好，并且与第一个声明示例相同。

其他演示文稿

两个任务：

这两个生成的html：

两个显示：

StackOverflow中的所有其他问题都没有使用方括号，但不是这种确切情况。

我不明白为什么它不显示图像以及我该怎么做

Answer 1

我认为问题不在于代码，而可能是您指向url的位置，确定路径正确。

您还可以使用一些计算属性来更改整个url，如下所示： https://jsfiddle.net/56zw74cp/3/

computed: { image_url: function() { return this.imagePreUrl + this.objectPublicSelected   };},

Answer 2

简短的回答：您无法显示动态生成的相对文件系统路径的图像。

要了解为什么有助于理解第一个示例的工作原理，

• 当图像带有静态 src 时，它将被翻译。转换由 webpack （或您正在使用的任何其他模块加载器）处理，而不是由vue.js本身处理。
• webpack决定该 src 会发生什么，它可能会转换为其他路径（在您的情况下会发生这种情况），甚至将整个图像都嵌入src属性中

当使用vue绑定时，最终的src在运行时生成，webpack不再运行，因此没有人负责转换属性。最终，无论传递给该属性的内容是什么。

您可以使用相对路径，但是该路径必须相对于当前访问的 URL 。相对文件系统路径将不起作用，因为您不在服务器的文件系统上运行，而是遵循URL规则。

任何绝对的 URL 路径显然都可以使用（只要该路径可导致有效的图片资源）。

注意：由于webpack（或其他模块加载器）的工作方式，很难确定图像资源的最终路径。例如：如果您有缓存清除策略，则最终路径与服务器文件系统上的路径完全不同。