我遇到过一个违反逻辑的现象，当页面加载时，任何图像的宽度和高度都是0，无论采取什么措施来确保情况不会如此。

一旦我加入了Vue，这种情况就立即发生了。我的项目中的js（导入CDN并初始化它）。没有其他任何类型的JavaScript或PHP代码会将此值设置为0。

我只是在页面上放了一个超文本标记语言图像标记：

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

该图像是一个输出到Vue的BLOB。js作为从数据库检索的base64字符串。我使用Vue。js将相关属性插入到属性中，因为它循环通过带有v-for的项目列表。我在代码中进行了检查，所有这些都定义得很好。我只是想设置宽度为70%和高度为auto，因此我将其包含在标签中：

<img class="border-radius" :src="'data:image/'+gallery.Fileformat+';base64,'+gallery.File" :alt="gallery.Title" id="galleryImage" width="70%" height="auto">

然而，一旦我在浏览器中实际加载页面，图像就不会出现。在超文本标记语言代码的页面中，我看到宽度和高度由于某种原因被设置为0。

一开始，我没怎么想，以为是Vue。js可能就是这样工作的，所以我尝试通过将这些属性绑定到Vue来设置它们。js变量以确保Vue以某种方式知道它们，因此我在HTML代码中添加了一个bind属性：

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

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

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

此外，简单地将字符串与Vue绑定而不是使用变量也不起作用：

这不起作用，属性再次为0！如果您想知道是的，HTML代码在Vue挂载中。在该部分代码工作中使用Vue执行的任何其他操作。

我在网上搜索了一下，发现这篇文章提到了jQuery中类似的行为。

因此，我考虑设置的值：宽度绑定属性的图像宽度一旦页面被Vue挂载，所以我添加了一个新的挂载处理程序（注意我是如何放弃高度在这一点上完全出于绝望）：

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" :alt="gallery.Title" id="galleryImage" @load="imageLoaded" :width="galleryImageWidth">
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代码位于页面底部