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中的开发人员工具中加载的信息时，我得到了＆＃34;没有图像＆＃34;加载很好，但是当我将鼠标悬停在网址时会显示一条消息：＆＃34; 无法加载＆＃34;：

  

编辑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>

你确定你的影像路径是对的吗？