图片不随源变化而变化

Question

我隐藏输入类型，只显示用于选择文件的图像，并在输入更改时调用函数:

function showpreview(file) {
var previewImg = $(file).parent().find('img').eq(0);
if (file.files && file.files[0]) {
console.log(window.URL.createObjectURL(file.files[0]));
previewImg.src = window.URL.createObjectURL(file.files[0]);
} else {
previewImg.src = "blankpreview.png";
}
console.log(previewImg.src);
console.log(previewImg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<label for="exampleFormControlFile2">
<img style="height:170px;" class="img-thumbnail" src="blankpreview.png" />
</label>
<input type="file" onchange="showpreview(this)" name="Screen_2" accept="image/jpeg, image/png" class="form-control-file d-none" id="exampleFormControlFile2" required />
</div>

在控制台显示正确的源和元素，但图像不改变

Answer 1

您可以使用.attr('src',yourimage)来设置图像标记的src

演示代码 :

function showpreview(file) {
var previewImg = $(file).parent().find('img') //no need of eq..
if (file.files && file.files[0]) {
console.log(window.URL.createObjectURL(file.files[0]));
previewImg.attr('src', window.URL.createObjectURL(file.files[0])); //use .attr here 
} else {
previewImg.attr('src', "blankpreview.png");
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<label for="exampleFormControlFile2">
<img style="height:170px;" class="img-thumbnail" src="blankpreview.png" />
</label>
<input type="file" onchange="showpreview(this)" name="Screen_2" accept="image/jpeg, image/png" class="form-control-file d-none" id="exampleFormControlFile2" required />
</div>

Answer 2

因为要处理原始DOM元素，所以需要在选择器中获取它…

var previewImg = $(file).parent().find('.img-thumbnail').eq(0)[0];

注意末尾的附加[0]。让我们按照下面的步骤来处理它…

$(file).parent()
.find('.img-thumbnail') // find the thumbnail image
.eq(0) // "I only want the first one you find"
[0]; // Give me the DOM element that's inside the jQuery object

function showpreview(file) {
var previewImg = $(file).parent().find('.img-thumbnail').eq(0)[0];
if (file.files && file.files[0]) {
previewImg.src = window.URL.createObjectURL(file.files[0]);
} else {
previewImg.src = "blankpreview.png";
}
console.log(previewImg.src);
console.log(previewImg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<label for="exampleFormControlFile2">
<img style="height:170px;" class="img-thumbnail" src="blankpreview.png" />
</label>
<input type="file" onchange="showpreview(this)" name="Screen_2" accept="image/jpeg, image/png" class="form-control-file d-none" id="exampleFormControlFile2" required />
</div>