Search code examples
htmlimagegoogle-drive-apiword-wrap

Google drive image not displayed in html code of sites.google.com


I am writing an HTML code for the sites.google.com. I have found the code to wrap the text around the image but I am unable to display the image itself. The image is in google drive(share status is 'viewer for anyone with the link'). Attached below are the code and a snapshot of the error.

<!DOCTYPE html>
<html>
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=default'></script>
</head>
<body>
   <h1>Coulomb's Law </h1>  
<div><p style="float: right;">
<img src="https://drive.google.com/thumbnail?id=${1rd3VIZ4tjO4GKNZNSFs4nZr-md0z9jy9}&sz=w${width || 400px}-h${height || 400px}></p> 


<!--img src="https://drive.google.com/file/d/1rd3VIZ4tjO4GKNZNSFs4nZr-md0z9jy9/view?usp=sharing" width="200px" height="200px" border="1px"  allow="autoplay"--></p> </div>

Coulomb's law states that the electrical force between two charged objects is directly proportional to the product of the quantity of charge on the objects and inversely proportional to the square of the separation distance between the two objects.</p>
<p align="justify" style="color:black;font-size:18px;" >
In equation form, Coulomb's law can be stated as</p>
$$ {F = \frac{k* Q_1 * Q_2}{r^2} }$$
<!$$ {J(\theta) =\frac{1}{2m} [\sum^m_{i=1}(h_\theta(x^{(i)}) - y^{(i)})2 + \lambda\sum^n_{j=1}\theta^2_j} $$>
<p align="justify" style="color:black;font-size:18px;" > 
where Q<sub>1</sub>  represents the quantity of charge on object 1 (in Coulombs), Q<sub>2</sub> represents the quantity of charge on object 2 (in Coulombs), and d represents the distance of separation between the two objects (in meters). The symbol k is a proportionality constant known as the Coulomb's law constant.</p>
</body>
</html>

Image is not displayed


Solution

  • You have using an invalid HTML (and url).

    <img src="https://drive.google.com/thumbnail?id=${1rd3VIZ4tjO4GKNZNSFs4nZr-md0z9jy9}&sz=w${width || 400px}-h${height || 400px}></p> 
    

    Use this instead:

    <img src="https://drive.google.com/thumbnail?id=1rd3VIZ4tjO4GKNZNSFs4nZr-md0z9jy9&sz=w400px-h400px"></p>