Vue 2 图像无法在某些浏览器中呈现

Question

我正在使用 Laravel 5.4 和 Vue 2.4.2。由于 axios 返回的数组，我正在使用 v-for 进行如下渲染：

<div class="card" style="width: 20rem; margin-left:1rem;" v-for="ad in ads" v-cloak>
      <img v-if="ad.image1" class="card-img-top" :src="'/public/ads/' + ad.image1" alt="Image">
      <img v-else class="card-img-top" src="/public/logo.png" alt="No Image">
      <div class="card-block">
        <h4 class="card-title">@{{ ad.title }}</h4>
        <p class="card-text">
            @{{ ad.description }}<br><hr>
            <strong>$@{{ ad.cost }}</strong>
        </p>
        <a href="#" class="btn btn-primary">Contact us</a>
    </div>
</div>

我尝试使用:src、v-attr:src 和v-bind:src。

信息已成功显示，但唯一不起作用的是：

<img v-if="ad.image1" class="card-img-top" :src="'/public/ads/' + ad.image1" alt="Image">

这也很好用：

<img v-else class="card-img-top" src="/public/logo.png" alt="No Image">

当我在 Firefox 的开发者工具中看到加载的信息时，我得到“无图像”加载得很好，但是当我将 URL 悬停时有一条消息：“无法加载”：

编辑 1：

奇怪的是，如果在开发者工具中我从 src 属性中复制 URL 并将其粘贴到浏览器中，我可以正确地看到图像。

编辑 2：这不是唯一奇怪的事情，它也适用于 Microsoft Edge 和 Google Chrome 移动设备，但不适用于 Firefox 或 Google Chrome。

这是 Vue 2 根据开发者工具生成的元素：

<img src="/public/ads/hcpOW7aPhJFXWR8MP0poRfYYvmcRKjq2M6irUsD7.jpeg" alt="Imagen" class="card-img-top vjnhddxuzwlropukknbb">

这是正在显示的生成元素：

<img src="/public/logo.png" alt="No Imagen" class="card-img-top">

Answer 1

啊，我测试了这个例子，但它确实有效。

data(){
	return {
		isShowImage : true,
		imgArr : ['banner.jpg', 'logo.png', 'about.jpg']
	}
}

<div v-for="img of imgArr">
	<img v-if="isShowImage" src="/data/images/banner.jpg"  style="width:100px;height:30px;"/>
	<img v-else src="/data/images/logo.png" style="width:100px;height:30px;" />
</div>
<button @click="isShowImage = !isShowImage" type="button" name="button">show</button>

你确定你的图片路径是对的吗？