Question

我有这样的东西：

<img class="product_image" src="{{ product.Image_url }}">

product.Image_url被引用到我的数据库，该数据库的图像URL类似于https://hackernoon.com/hn-images/1*YNBTPaCNBNWLoT7XAbJ1Lw.png。这段代码给我一个Failed to load resource: the server responded with a status of 404 (Not Found)错误。我不确定我在做什么错。

在此方面将提供帮助。

谢谢！

Answer 1

如果图像https://something.com/something.png确实存在（将URL粘贴到浏览器地址栏以确保您可以加载资产），请尝试以下操作：

<img class="product_image" :src="product.Image_url">

Answer 2

如果您尝试使用当前使用的标记，vue将在JS控制台中记录一条警告，解释错误的原因和解决方法：

new Vue({
  el: '#app',
  data: {
    product: { Image_url: 'https://via.placeholder.com/120.png?text=Product+image' }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <img class="product_image" src="{{ product.Image_url }}">
</div>

具体来说，运行上面的代码片段将产生以下警告：

src="{{ product.Image_url }}"：属性内的插值已删除。请改用v-bind或冒号速记。例如，使用<div id="{{ val }}">代替<div :id="val">。

要解决此问题，请按照其说明进行操作，即将src="{{ product.Image_url }}"替换为:src="product.Image_url"：

new Vue({
  el: '#app',
  data: {
    product: { Image_url: 'https://via.placeholder.com/120.png?text=Product+image' }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <img class="product_image" :src="product.Image_url">
</div>

Answer 3

<img class="product_image" :src="product.Image_url">

只需将其用冒号绑定，然后除去括号即可。

如何在Vue js中在线引用图像？

3 个答案: