包含 Vue.js 后，图像宽度和高度始终为 0 [关闭]

Posted 2023-02-22

【中文标题】包含 Vue.js 后，图像宽度和高度始终为 0 [关闭]

【英文标题】：Image width and height are always 0 once Vue.js is included [closed]

【发布时间】：2022-01-23 19:40:59

【问题描述】：

我遇到过一个不合逻辑的现象，无论采取什么措施确保不会出现这种情况，任何图像在页面加载时的宽度和高度都为 0。

一旦我将 Vue.js 包含在我的项目中（导入 CDN 并对其进行初始化），就会立即发生这种情况。没有其他任何类型的 javascript 或 php 代码可以将此值设置为 0。

我只是在页面上放了一个 html 图像标签：

<img class="border-radius" :src="'data:image/'+gallery.Fileformat+';base64,'+gallery.File" :>

图像是从数据库中检索到的作为 base64 字符串输出到 Vue.js 的 BLOB。我使用 Vue.js 将相关属性插入到属性中，因为它正在循环使用 v-for 的项目列表。我已经检查了代码，所有这些都定义得很好。我只是想设置70% 的width 和auto 的height，所以我将它包含在标签中：

<img class="border-radius" :src="'data:image/'+gallery.Fileformat+';base64,'+gallery.File" : id="galleryImage"  >

但是，一旦我在浏览器中实际加载页面，图像就不会出现。在页面 HTML 代码中，我看到 width 和 height 出于某种原因设置为 0。

起初我并没有想太多，并认为 Vue.js 可能只是这样工作，所以我尝试通过将它们绑定到 Vue.js 变量来设置这些属性，以确保 Vue 以某种方式知道它们，所以我添加了HTML 代码的绑定属性：

<img class="border-radius" :src="'data:image/'+gallery.Fileformat+';base64,'+gallery.File" : id="galleryImage" : :>

在 Vue 中，我已经将它初始化为一个变量，其中包含我想要设置的值：

let app = Vue.createApp(
    data: function()
        return
            imageWidthGallery: '70%',
            imageHeight: 'auto'
        
    
)
app.mount('#app')

同样简单地用 Vue 绑定字符串而不是使用变量也不起作用：

<img class="border-radius" :src="'data:image/'+gallery.Fileformat+';base64,'+gallery.File" : id="galleryImage" : :>

这不起作用，属性再次为 0！如果您想知道是的，HTML 代码位于 Vue 挂载内。在这部分代码中使用 Vue 完成的任何其他操作都有效。

我在网上搜索并找到this SO 帖子，其中提到了 jQuery 中的类似行为。

所以我考虑过在 Vue 挂载页面后设置图像宽度的 :width 绑定属性的值，所以我添加了一个新的挂载处理程序（注意我是如何完全放弃高度的绝望地指出）：

let app = Vue.createApp(
        data: function()
            return
                imageWidthGallery: ''
            
        ,
        mounted: function()
            imageWidthGallery: '70%'
        
    )
    app.mount('#app')

这又导致了同样的问题并且没有解决任何问题。所以我想到了设置。那么

我尝试检测图像是否已加载@load，然后更改它：

<img class="border-radius" :src="'data:image/'+gallery.Fileformat+';base64,'+gallery.File" : id="galleryImage" @load="imageLoaded" :>
let app = Vue.createApp(
        data: function()
            return
                imageWidthGallery: '',
            
        ,
        methods:
           imageLoaded: function()
               imageWidthGallery: '70%'
           
        
    )
    app.mount('#app')

这也不起作用。我尝试强制更改 CSS 代码，在添加 Vue.js 之前不会导致任何这种情况（我仍然相信 CSS 与此无关）。这也没有帮助。

我觉得完全没有选择，完全不知道这是什么原因，也没有办法尝试解决这个问题。我还没有发现任何其他人对 Vue.js 有这个问题，即使有东西覆盖了 CSS 甚至 JS 中的值（它不是）我希望 Vue.js 简单地覆盖它，因为它是最后一个JS 代码在页面最底部的 <script> 标记内执行，甚至位于所有 CDN 下方。据我了解，无论 CSS 代码如何，如果属性是在 HTML 中设置的，它将始终采用 HTML 值。这到底是什么鬼？

【问题讨论】：

HTML 隐藏在 SO 上的帖子中，除非标记为代码。不过，没有必要用标记说话。

【参考方案1】：

当我解决方法时，我发现通过 HTML style="'width: 70%; height: auto;'" 设置宽度或高度是可行的。如果您将属性与 Vue.js 绑定，请记住在双引号内传递 ''，因为您将字符串传递给 Vue 绑定。虽然我仍然想知道是什么导致这个问题首先发生......

使用 Vue.js 的解决方法（如果使用了 Vue 变量）：

<img src="MyImage.jpg"  :style="'width: 70%; height: auto;'">

使用纯 HTML 的解决方法：

<img src="MyImage.jpg"  style="width: 70%; height: auto;">

【讨论】：

您不需要绑定文字字符串（即<img :style="'foo'"> 与<img style="foo"> 相同）。您发布的两种解决方法实际上是相同的（前者不必要地冗长）。