Html中img控制項的src屬性

2021-08-15 16:37:34 字數 2149 閱讀 6985

方式一:

直接給src屬性乙個伺服器端資源的位址,img控制項會自動獲取並解析資源。

方式二:

當訪問的資源不在工程路徑下時,想到的辦法是通過返回給img控制項位元組流,讓img控制項解析,開始直接將ajax非同步獲取的位元組流設給了img的src屬性,發現無法顯示,通過的指點,完成通過給src屬性賦予位元組資料來顯示資料,大致為:位元組流先在伺服器端進行base64編碼,在輸出前需要將mime的字串位元組輸出,**如下:

outputstream.write(metatype.getbytes());//這一行**直接影響是否將接下來的位元組解析為

outputstream.write(base64utils.encode(bytes));

inputstream.close();

outputstream.flush();

outputstream.close();

} }html**為:

$.get('$/image/viewdirect',,function(data))
最直接的方法,第二種方法相當於繞了個彎路,其實直接將鏈結給src屬性,即使不是伺服器工程下的資源,只要img控制項通過這個src指定的鏈結能夠獲取到正確的位元組流,就可以正確解析了。**如下:

html**:

$("#img").attr("src",'$/image/viewdirect?url='+imgs[index]);
伺服器端**為:

//方式二

// bufferedimage image = imageio.read(file);

// imageio.write(image,"jpeg",response.getoutputstream());

//方式三

// byte bytes = new byte[(int) file.length()];

// inputstream.read(bytes);

// // outputstream.write(metatype.getbytes());//這一行**直接影響是否將接下來的位元組解析為

outputstream.write(base64utils.encode(bytes));

// outputstream.write(bytes);

inputstream.close();

outputstream.flush();

outputstream.close();

} }

vue中img標籤的src屬性總結

初步接觸vue框架時,好多朋友使用img標籤時,設定動態src屬性時,可能都會遇到路徑不生效的問題,咱們廢話不多說,開整 img標籤引用資源 一般不需要webpack處理的資源放在static,需要經過處理的放在assets 1.不需要webpack處理的放在static 不需要webpack處理的...

Vue中img的src屬性繫結問題

vue中的元素屬性繫結使用v bind attr 如下我們來繫結乙個img元素的src屬性 url assets logo.png 至於原因,是因為vue 通過構建工具打包後,檔案的路徑會發生變化 解決方法 根據vue cli的檔案結構,其中有乙個叫做static的資料夾,將logo.png放入這個...

vue render載入img的src路徑問題

一般我們都在src下的assets資料夾下images下 html中我們這樣使用沒問題 assets images know bji.png style width 24px border radius 5px 這個路徑就根據自己在哪個檔案中獲取來自行寫了 vue render配置img的src路徑...