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

Posted 2023-02-22

【中文标题】Vue 2 图像无法在某些浏览器中呈现

【英文标题】：Vue 2 Images not rendering in some browsers

【发布时间】：2018-01-12 15:10:24

【问题描述】：

我正在使用 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" >
      <img v-else class="card-img-top" src="/public/logo.png" >
      <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" >

这也很好用：

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

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

编辑 1：

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

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

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

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

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

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

【参考方案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>

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

【讨论】：

我需要验证那里有一张图片，如果不是，我使用v-else 显示另一张图片。但我会读到v-show 以及如何实现它

@Maramal 对不起，我最后回答错了。我测试它有效。您可以使用 Firefox Dev Network 工具检查图像路径吗？如果浏览器告诉你“没有图像”，那是真的没有找到图像，

我添加了开发工具外观的图像，我复制并粘贴了与浏览器提供的完全相同的完整限定 URL，然后我被重定向到图像。奇怪的是它可以在 Microsoft Edge 和我的手机上运行，​​而不是在 Firefox 或 Chrome 上运行