Why Can't I Do ≪Img Src="C:/Localfile.Jpg"≫

Why can't I do img src=C:/localfile.jpg?

It would be a security vulnerability if the client could request local file system files and then use JavaScript to figure out what's in them.

The only way around this is to build an extension in a browser. Firefox extensions and IE extensions can access local resources. Chrome is much more restrictive.

HTML img src wont load my images

My images were in fact corrupt or not working properly as I couldn't open them in Photoshop, I had to replace the images.

How to set img src to png file in project using JS

thanks to the help of wOOxxOm I got the icon to show up.
Changes in my manifest.json file were pretty straight forward, helped out by the answer of this question How to migrate manifest version 2 to v3 for chrome extension?

"manifest_version": 2,
  "name": "extension",
  "version": "0.1",
  "description": "A nutritional claims checker ",
  "content_scripts": [
    {
      "css": ["./content.css"],
      "matches": ["*://www.target.com/*"]
    }
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "web_accessible_resources": ["*.png"],
  "permissions": ["tabs", "webNavigation", "*://www.target.com/*"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "Demo extension",
    "default_icon": "/images/logoE4572E.png",
    "default_badge": "extension"
  }
}

in my js file I created the icon element and assigned the source like this:

    const alertIcon = document.createElement("img");
    const source = chrome.runtime.getURL("images/small_alert.png");
    alertIcon.src = source;
    iconDiv.appendChild(alertIcon);

mozilla docs were helpful for this part (but obviously for a chrome extension use chrome.runtime... instead of browser.runtime...
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources

How to embed image or picture in jupyter notebook, either from a local machine or from a web resource?

You mustn't use quotation marks around the name of the image files in markdown!

If you carefully read your error message, you will see the two %22 parts in the link. That is the html encoded quotation mark.

You have to change the line

![title]("img/picture.png")

to

![title](img/picture.png)

UPDATE

It is assumed, that you have the following file structure and that you run the jupyter notebook command in the directory where the file example.ipynb (<-- contains the markdown for the image) is stored:

/
+-- example.ipynb
+-- img
    +-- picture.png

HTML Image not displaying, while the src url works

Your file needs to be located inside your www directory. For example, if you're using wamp server on Windows, j3evn.jpg should be located,

C:/wamp/www/img/j3evn.jpg

and you can access it in html via

<img class="sealImage" alt="Image of Seal" src="../img/j3evn.jpg">

Look for the www, public_html, or html folder belonging to your web server. Place all your files and resources inside that folder.

Hope this helps!

---

Related Topics