การลิงค์ภาพ จาก Google Drive

การลิงค์ภาพ จาก Google Drive

- มีนาคม 27, 2561

เราสามารถนำภาพไปวางไว้บน Google Drive แล้ว ลิงค์ภาพเพื่อแสดงในโค้ด img ได้ ดังนี้

การนำภาพจาก Google Drive มาแสดงใน img tag

นำภาพขึ้น Google Drive และ หา id ของภาพ โดยไปที่ภาพ คลิกขวา เลือก Share
คลิกสามเหลี่ยมเพื่อคลี่การตั้งค่าให้มากขึ้น แล้วคลิกเลือก more
เลือก On - Public on the web แล้วคลิก Save
คลิก Copy link แล้วคลิก Done
นำ id ของ ภาพ มาแทนที่ในโค้ด
< img src = "https://drive.google.com/uc?id= ........................................... &export=download">

ความคิดเห็น

search_functionality_for_vocab

let searchIndex = 0; let lastSearchTerm = ""; let allMatches = []; function updateButtons() { const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); if (allMatches.length <= 1) { prevBtn.disabled = true; nextBtn.disabled = true; } else { prevBtn.disabled = searchIndex === 0; nextBtn.disabled = searchIndex === allMatches.length - 1; } } function searchAndHighlight() { const input = document.getElementById('searchInput').value.trim(); if (!input) return; if (input !== lastSearchTerm) { lastSearchTerm = input; searchIndex = 0; highlightAllMatches(input); } } function highlightAllMatches(term) { const content = document.getElementById('content'); removeHighlights(); const regex = new RegExp(term, 'gi'); allMatches = []; const walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT, null, false); let textNodes = []; while (walker.nextNode()) { textNodes.push(walker.currentNode); } textNodes.forEach(node => { let parent = node.parentNode; let text = node.nodeValue; if (regex.test(text)) { let frag = document.createDocumentFragment(); let lastIndex = 0; regex.lastIndex = 0; let match; while ((match = regex.exec(text)) !== null) { let before = text.slice(lastIndex, match.index); if (before) frag.appendChild(document.createTextNode(before)); let span = document.createElement('span'); span.className = 'highlight'; span.textContent = match[0]; frag.appendChild(span); allMatches.push(span); lastIndex = match.index + match[0].length; } let after = text.slice(lastIndex); if (after) frag.appendChild(document.createTextNode(after)); parent.replaceChild(frag, node); } }); if (allMatches.length > 0) { allMatches[0].classList.add('current'); allMatches[0].scrollIntoView({ behavior: 'smooth', block: 'center' }); } updateButtons(); } function removeHighlights() { allMatches.forEach(span => { const textNode = document.createTextNode(span.textContent); span.parentNode.replaceChild(textNode, span); }); allMatches = []; searchIndex = 0; updateButtons(); } function moveToPreviousMatch() { if (searchIndex > 0) { allMatches[searchIndex].classList.remove('current'); searchIndex--; allMatches[searchIndex].classList.add('current'); allMatches[searchIndex].scrollIntoView({ behavior: 'smooth', block: 'center' }); updateButtons(); } } function moveToNextMatch() { if (searchIndex < allMatches.length - 1) { allMatches[searchIndex].classList.remove('current'); searchIndex++; allMatches[searchIndex].classList.add('current'); allMatches[searchIndex].scrollIntoView({ behavior: 'smooth', block: 'center' }); updateButtons(); } } function clearSearch() { removeHighlights(); document.getElementById('searchInput').value = ""; lastSearchTerm = ""; } function showContent(id) { const allSections = document.querySelectorAll('#content > div'); allSections.forEach(section => { section.style.display = 'none'; }); const target = document.getElementById(id); if (target) { target.style.display = 'block'; target.scrollIntoView({ behavior: 'smooth' }); } // clear highlights and reset search input when link clicked clearSearch(); } /* ============================================= */ function highlightMatches() { let content = document.getElementById('content'); content.innerHTML = content.innerHTML.replace(/(.*?)<\/mark>/g, '$1'); if (matches.length === 0) return; let currentMatch = matches[searchIndex % matches.length]; let span = document.createElement('mark'); span.className = 'highlight'; span.textContent = currentMatch.node.nodeValue.substr(currentMatch.start, currentMatch.length); let before = document.createTextNode(currentMatch.node.nodeValue.substring(0, currentMatch.start)); let after = document.createTextNode(currentMatch.node.nodeValue.substring(currentMatch.start + currentMatch.length)); let parent = currentMatch.node.parentNode; parent.replaceChild(after, currentMatch.node); parent.insertBefore(span, after); parent.insertBefore(before, span); span.scrollIntoView({ behavior: 'smooth', block: 'center' }); searchIndex++; }