在 vue.js 中显示图像

Question

我正在尝试开发 SPA。在这方面，我在前端使用 vue.js 2，在后端使用 Laravel 5.5 API。现在我想在前端显示图像。我在 HTML

中写了下面的代码

<img :src="/images/addressObj.image"/>

我应该在 Laravel 中的什么地方放置图像以及如何在 vue.js 中访问该图像？

Answer 1

假设这是一个 .vue 或 .js 文件，

<img :src="`/images/${addressObj.image}`"/>

我假设您已经为变量 addressObj 正确地完成了必要的工作。

Answer 2

好吧，因为你有动态源绑定，你必须要求每个图像。

所以你应该这样做:

<img :src='require(`./images/${addressObj.image}`)'>

Answer 3

这里的问题是你没有正确使用 :src 属性，:src 将字符串视为值，不要让双引号混淆你，在双引号之间你必须放置你的格式化字符串，请注意，如果使用 :src="www.google.com/size" img 将尝试查找 url www.google.com/size 而不是 www.google.com/350x150 或者如果您尝试 www.google.com/{{size}} img 将尝试查找 www.google.com/%7B%/Bsize%7D%7D（大小是来自下面示例的 var）

new Vue({
  el: '#app',
  data() {
    return {
      size: '350x150',
      size2: '350x400'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>


<div id="app">
  <button @click="size = '350x150'">Size 350x150</button>
  <button @click="size = '350x200'">Size 350x200</button>
  <!-- notice the single quotes -->
  <img :src="'http://via.placeholder.com/' + size" />
  <hr />
  <button @click="size2 = '350x400'">Size2 350x400</button>
  <button @click="size2 = '350x300'">Size2 350x300</button>
  <!-- here with string interpolation -->
  <img :src="`http://via.placeholder.com/${size2}`" />
</div>

在 vue.js 中显示图像

Display image in vue.js

vuejs2

laravel-5.5