图片路径

1.img src路径

<img src="./assets/img/title.png" />

说明：图片需要放在assets文件夹下

2.img 设置统一前缀

<img :src="imgAddfun('title.png')" />

　main.js中设置统一前缀

Vue.prototype.imgAddfun = (address)=>{return require(`./assets/img/${address}`)}

3.img 设置动态路径

<img :src="sAudioOnImg">
sAudioOnImg: this.isAudioOn? require("../../assets/img/closevoice.png"): require("../../assets/img/mic-off.png"),

说明：src为动态路径时，变量需要使用requere()来获取图片路径

<img :src="statusImg" style="width: 1rem;" />

 computed: {
               statusImg: function () {
                   return this.status === 'working' ? ("/Content/trtc/img/working.jpg") : ("/Content/trtc/img/leaveMoment.jpg")

               }
           },

4.获取图片真是路径，赋值给url,展示图片

注：如果想要获取真实物理路径，例如D://,获取不了，如果可以获取那么js 就可以随便猜测你磁盘上的文件了，出于明显的安全原因，源文件的实际路径没有显示在 input 的 value 属性中。相反，显示了文件名，并用 C:\fakepath\ 附加在路径的开头

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>文件上传</title>
</head>
 
<body style="background-color: White">
 <input type="file" name="" id="PictureUrl">
</body>
</html>
<script src="../../../../../05jQuery/libs/jquery-1.12.4.min.js"></script>
<div id="imgContainer"></div>
<script type="text/javascript">
    $(document).ready(function () {
 
    });
    $(document).on('change', '#PictureUrl', function () {
        console.log(this.files[0]);
        var objURL = window.webkitURL.createObjectURL($("#PictureUrl")[0].files[0]);
        console.log('url2', objURL)
        $('#imgContainer').html("<img src='" + objURL + "' alt='Alternate Text' width='640px' height='350px' id='target' />");
    });
    function getObjectURL(file1) {
            var url = null;
            url = window.webkitURL.createObjectURL(flie1) ;
            // if (window.createObjectURL!=undefined) { // basic
            //     url = window.createObjectURL(flie1) ;
            // }else if (window.webkitURL!=undefined) { // webkit or chrome
            //     url = window.webkitURL.createObjectURL(flie1) ;
            // }else if (window.URL!=undefined) { // mozilla(firefox)
            //     url = window.URL.createObjectURL(flie1) ;
            // }
            console.log('url', url)
            return url;
        }
</script>

图片未加载前展示loading,加载完成展示图片，错误展示缺省图片

<img class="imageContent imgs" src="~/Content/img/assets/lQ_500.gif" :onload="onLoadImg(item.outPutUrl)" :onerror="onerrorImg('/Content/img/assets/OIP-C.png')"/>

            onLoadImg: function (imgSrc) { //加载完成时触发
                return 'this.src=' + '"' + imgSrc + '";this.onload=null';
            },
            onerrorImg: function (imgSrc) { //加载完成时触发
                return 'this.src=' + '"' + imgSrc + '";this.onload=null';
            },

posted @ 2021-12-27 17:28 我の前端日记阅读(159) 评论(0) 收藏举报

刷新页面返回顶部