相关疑难解决方法(0)

我从 nodejs 上传图片到 vue 并将图片放入 v-card

但是图片被剪掉了

如何通过不剪切来调整图像大小？

我正在处理一个包含各种表单元素的表单,可以选择上传多个图像(最多6个).现在我有一个div preview点击该div我使用jquery获取所有表单字段(此时表单仍未提交,因为它是一个多表单step1,2和3).现在问题是我使用此代码获取所有表单数据 -

var allFormData = $("#myform").serializeArray(); 

使用这个另一个代码,我能够显示div中的其余数据,但图像不会到来.

$.each(adtitletoshow, function(i, field){
    if( field.name == 'desc'){ 
        $(".add_desc").text(field.value);
    }
});

这是JS创建的上传图片的字段.

<script type="text/javascript">
    var total_images = 1 ;
    function add_file_field () {
        total_images++ ;
        if ( total_images > 6 ) return ;
        var str_to_embed = '<input name="fileImage[]" size="40" style="width: 500px;" type="file" onChange="add_file_field()"><br>' ;
        $("#image_stack").append ( str_to_embed ) ;
    }
</script>

所有事情都在单页上进行,所以我需要一个解决方案,如何在我的预览div下加载图像.让我知道如果thr仍然存在一些歧义点.

这是我需要做的.所以我有这个代码

 <input type="file" id="uploadImage" name="image" />
    <input type="submit" id="ImageName" name="submit" value="Submit">

因此,当我单击"选择..."按钮浏览图像时,我希望将该图像的路径保存在变量中.

或者基本上我需要做的是使这条路径成为图像的src.

$('#Imageholder').append('<img src="" class="ImgCoords" >');

有任何想法吗？

对不起,如果说明不好:

我试图这样做,当你选择你的图像时,它会直接显示它.当然你onchange在html 的东西中这样做.这就是我现在所拥有的:

function showImage(src, target) {
    var fr = new FileReader();

    fr.onload = function (e) { target.src = this.result; };

    src.addEventListener("change", function () {

        fr.readAsDataURL(src.files[0]);
    });

}
function putImage() {
    var src = document.getElementById("select_image");
    var target = document.getElementById("target");
    showImage(src, target);
}

<img id="target" />
<input type="file" id="select_image" name="image" onchange="putImage()"> </input>

这对我来说不是很奇怪.因为onchange有效.我可以通过警告事件来测试它.这很好用.javascript也适用于jsfiddle ..但这些东西并没有合并.我希望有人能帮帮忙

我试图从onLoadingComplete道具中获取naturalWidth和naturalHeight：https://nextjs.org/docs/api-reference/next/image#onloadingcomplete但它不起作用？也许我做错了？

const handleImageLoad = (e) => {
  console.log("load", e);
};

<Image
  onLoadingComplete={(e) => handleImageLoad(e)}
  className=""
  src={image["data_url"]}
  alt=""
  layout="fill"
  objectFit="contain"
/>

onLoadingComplete={() => handleImageLoad()}