在 vue.js 中显示图像

debugcn 发表于 Dev

阿布阿布

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

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

我应该将图像放在 Laravel 的什么位置，如何在 vue.js 中访问该图像？

多宝

这里的问题是，你没有使用正确的：SRC ATTR，：SRC重视域字符串作为值，不要让双引号迷惑你，你有双引号把你的格式化字符串之间，注意，如果使用:src="www.google.com/size"的IMG将试图找到该网址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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。