દૂરસ્થ સ્ત્રોતોમાંથી HTML ઉમેરવાથી સંબંધિત મુખ્ય સમસ્યા એ છે કે તે ધીમા પૃષ્ઠ લોડિંગ સમય તરફ દોરી શકે છે. આ એટલા માટે છે કારણ કે બ્રાઉઝરને દરેક છબી માટે અલગ વિનંતી કરવી આવશ્યક છે, જે પૃષ્ઠ પર બહુવિધ છબીઓ હોય તો ઝડપથી ઉમેરી શકાય છે. વધુમાં, જો રિમોટ સોર્સ ડાઉન હોય અથવા ધીમા કનેક્શન હોય, તો આ પેજ લોડ થવાના સમયમાં વધુ વિલંબ કરી શકે છે. છેલ્લે, સુરક્ષા નબળાઈઓનું જોખમ પણ છે કારણ કે છબીઓ બાહ્ય સ્ત્રોતમાંથી ખેંચવામાં આવી રહી છે.
<img src="https://example.com/image.jpg" alt="Example Image">
1. કોડની આ લાઇન એક HTML ઇમેજ ટેગ છે, જેનો ઉપયોગ વેબપેજ પર ઇમેજ પ્રદર્શિત કરવા માટે થાય છે.
2. “src” એટ્રિબ્યુટ પ્રદર્શિત થનારી ઇમેજના URL નો ઉલ્લેખ કરે છે, આ કિસ્સામાં તે “https://example.com/image.jpg” છે.
3. "Alt" લક્ષણ ઇમેજ માટે વૈકલ્પિક ટેક્સ્ટ પ્રદાન કરે છે, આ કિસ્સામાં તે "ઉદાહરણ છબી" છે.
img src લક્ષણ
HTML માં img src એટ્રીબ્યુટનો ઉપયોગ ઈમેજના સ્ત્રોતને સ્પષ્ટ કરવા માટે થાય છે. તે અંદર વપરાય છે ઇમેજના સ્ત્રોતને વ્યાખ્યાયિત કરવા માટે ટેગ કરો. આ વિશેષતાનું મૂલ્ય ઇમેજ ફાઇલ તરફ નિર્દેશ કરતું માન્ય URL હોવું જોઈએ. વેબ પૃષ્ઠ પરની તમામ છબીઓ માટે આ વિશેષતા જરૂરી છે, અને તે બ્રાઉઝરને ઇમેજ શોધવા અને પ્રદર્શિત કરવાની મંજૂરી આપે છે.
હું HTML માં બાહ્ય છબી કેવી રીતે ઉમેરી શકું
HTML માં બાહ્ય છબી ઉમેરવી એકદમ સરળ છે. તમારે ફક્ત ઉપયોગ કરવાની જરૂર છે src એટ્રિબ્યુટનો ઉપયોગ કરીને ઇમેજના સ્ત્રોતને ટેગ કરો અને સ્પષ્ટ કરો. HTML માં બાહ્ય છબી ઉમેરવા માટેનું વાક્યરચના આના જેવું દેખાય છે:
જ્યાં "image_url" એ ઇમેજ ફાઇલની લિંક છે અને "વૈકલ્પિક ટેક્સ્ટ" એ ઇમેજમાં શું છે તેનું વર્ણન છે (સુલભતા હેતુઓ માટે).
ઉદાહરણ તરીકે, જો તમે તમારી વેબસાઇટ પરથી my-image.jpg નામની બાહ્ય છબી ઉમેરવા માંગતા હો, તો તમારો કોડ આના જેવો દેખાશે:
