Src Absolute Path Problem

src absolute path problem

You should be referencing it as localhost. Like this:

<img src="http:\\localhost\site\img\mypicture.jpg"/>

Absolute path in IMG SRC does not display image

It will never work

"img src" works in client's browser, which doesn't have access to the server's directory structure and files below the c:/inetpub/wwwroot directory.

Absolute paths in "img src" can only be "http://domain.com/folder/file.ext", like that

Relative path not working but absolute works

The behavior of require(...) is always resolved according to its own rules in the relative path of the file by the require.resolve(...) function.

However, Canvas.loadImage. Because it's loading part implemented in C, it can have different behavior than Node and has no context for the current js file location.

I recommend you to resolve the path based on __dirname explicitly.

How to update relative img src tag to an absolute path using javascript

It looks like you passed a string to the first argument of String#replace:

images[i].src = sources.replace("^https?:\/\/fiddle\.jshell\.net(\/)", "http://duo.com")

You probably meant to pass a regular expression (note the use of / rather than "; this represents a regex literal in JS):

images[i].src = sources.replace(/^https?:\/\/fiddle\.jshell\.net(\/)/, "http://duo.com")

However, I would advise that the majority of your looping and testing logic be reduced to a single call to replace within a forEach loop, like so:

[].forEach.call(document.getElementsByTagName('img'), function (image) {  image.src = image.src.replace(/^https?:\/\/fiddle\.jshell\.net\//, 'http://duo.com/')  console.log(image.src)})

<img src="http://fiddle.jshell.net/favicon.ico">

Python requests gives image src as relative path instead of absolute path

If you see response html present in soup,

<a class="img-wrapper fancybox" data-caption="Pedestrian Crosswalk Sign" data-fancybox="group" href="assets/images/content/street_view_1a.jpg">
<img alt="Pedestrian Crosswalk Sign" src="assets/images/content/street_view_1a.jpg"/>

it does not have the entire path as you see in chrome which is probably added by your browser. Hence you were not getting the full path. You will have to extract the tag src and concat it with the FQDN.

from bs4 import BeautifulSoup
import requests
response = requests.get('https://www.pexco.com/traffic/products/pedestrian-safety-products/in-street-pedestrian-crosswalk-signs/')

soup = BeautifulSoup(response.text, 'lxml')
for imgTag in soup.find_all('img'):
    img_src = imgTag['src']
    if ('assets' in img_src):
        print('https://www.pexco.com/' + img_src)
    else:
        print(img_src)

This gives us :

https://www.webtraxs.com/webtraxs.php?id=pexco&st=img
https://www.pexco.com/assets/images/template/pexco-logo-dark.svg
https://www.pexco.com/assets/images/banners/bg-banner-traffic-desktop.jpg
https://www.pexco.com/assets/images/content/TUL_5890.jpg
https://www.pexco.com/assets/images/content/Davidson_STOP_4_Ped_Sign_Atlanta_012309.jpg
https://www.pexco.com/assets/images/content/P0000689.jpg
https://www.pexco.com/assets/images/content/street_view_1a.jpg
https://www.pexco.com/assets/images/content/street_view_2a.jpg
https://www.pexco.com/assets/images/content/TUL_5890.jpg
https://www.pexco.com/assets/images/content/Davidson_STOP_4_Ped_Sign_Atlanta_012309.jpg
https://www.pexco.com/assets/images/content/P0000689.jpg
https://www.pexco.com/assets/images/content/street_view_1a.jpg
https://www.pexco.com/assets/images/content/street_view_2a.jpg
https://www.pexco.com/assets/images/content/CADdetails_Microsite_Button.jpg
https://www.pexco.com/assets/images/template/pexco-logo-dark.svg
https://www.pexco.com/assets/images/template/fb-icon.jpg
https://www.pexco.com/assets/images/template/LI-icon.jpg
https://www.pexco.com/assets/images/template/YT-icon.jpg
https://px.ads.linkedin.com/collect/?pid=2856522&fmt=gif

EDIT :

As discussed with OP, she needs a solution that directly returns her the full url. Selenium can be used in this case.

Please try the following code.

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By

chrome_path = r"C:\Users\hpoddar\Desktop\Tools\chromedriver_win32\chromedriver.exe" # PUT YOUR CHROME PATH HERE
s = Service(chrome_path)

url = 'https://www.pexco.com/traffic/products/pedestrian-safety-products/in-street-pedestrian-crosswalk-signs/'
driver = webdriver.Chrome(service=s)
driver.get(url)

images = driver.find_elements(By.TAG_NAME, 'img')
for image in images:
    print(image.get_attribute('src'))

which gives us the expected output :

https://www.pexco.com/assets/images/template/pexco-logo-dark.svg
https://marvel-b1-cdn.bc0a.com/f00000000266812/www.pexco.com/assets/images/banners/bg-banner-traffic-desktop.jpg
https://marvel-b1-cdn.bc0a.com/f00000000266812/www.pexco.com/assets/images/content/TUL_5890.jpg
https://marvel-b1-cdn.bc0a.com/f00000000266812/www.pexco.com/assets/images/content/Davidson_STOP_4_Ped_Sign_Atlanta_012309.jpg
https://marvel-b1-cdn.bc0a.com/f00000000266812/www.pexco.com/assets/images/content/P0000689.jpg
https://marvel-b1-cdn.bc0a.com/f00000000266812/www.pexco.com/assets/images/content/street_view_1a.jpg
https://marvel-b1-cdn.bc0a.com/f00000000266812/www.pexco.com/assets/images/content/street_view_2a.jpg
https://marvel-b1-cdn.bc0a.com/f00000000266812/www.pexco.com/assets/images/content/TUL_5890.jpg
https://marvel-b1-cdn.bc0a.com/f00000000266812/www.pexco.com/assets/images/content/Davidson_STOP_4_Ped_Sign_Atlanta_012309.jpg
https://marvel-b1-cdn.bc0a.com/f00000000266812/www.pexco.com/assets/images/content/P0000689.jpg
https://marvel-b1-cdn.bc0a.com/f00000000266812/www.pexco.com/assets/images/content/street_view_1a.jpg
https://marvel-b1-cdn.bc0a.com/f00000000266812/www.pexco.com/assets/images/content/street_view_2a.jpg
https://marvel-b1-cdn.bc0a.com/f00000000266812/www.pexco.com/assets/images/content/CADdetails_Microsite_Button.jpg
https://www.pexco.com/assets/images/template/pexco-logo-dark.svg
https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png
https://marvel-b1-cdn.bc0a.com/f00000000266812/www.pexco.com/assets/images/template/fb-icon.jpg
https://marvel-b1-cdn.bc0a.com/f00000000266812/www.pexco.com/assets/images/template/LI-icon.jpg
https://marvel-b1-cdn.bc0a.com/f00000000266812/www.pexco.com/assets/images/template/YT-icon.jpg
https://www.gstatic.com/images/branding/product/1x/translate_24dp.png
https://marvel-b1-cdn.bc0a.com/f00000000266812/cdn1.thelivechatsoftware.com/assets/interchanges/pexco.com/resources/pexco_2021-11-18.03-09-45.png

Image src relative path to absolute path

You should always use same path for all the images, but as of your case you can loop through images and append the domain, as of the use case I have added the domain in variable you can change it as per your requirement.

You can use common function or image onload to rerender but I h

Note: image will rerender once its loaded.

var imageDomain = "https://homepages.cae.wisc.edu/~ece533/";
//javascript solution// window.onload = function() {//   var images = document.getElementsByTagName('img');//   for (var i = 0; i < images.length; i++) {//     if (images[i].getAttribute('src').indexOf(imageDomain) === -1) {//       images[i].src = imageDomain + images[i].getAttribute('src');//     }//   }
// }
//jquery solutionvar b = 'https://www.example.com';$('img[src^="/media/"]').each(function(e) {  var c = b + $(this).attr('src');  $(this).attr('src', c);});
//best approach you are using get request//assuming you are getting this respone from apivar bArray = ["https://www.example.com/media/image.png", "/media/image.png"]var imgaesCorrected = bArray.map(a => {  if (a.indexOf(b) === -1) {    a = b+a;  }  return a;});console.log(imgaesCorrected);

img {  width: 50px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><img src="/media/image.png"><img src="https://www.example.com/media/image.png">

What is the correct file path to use for my img src=

The relative path from your src/index.html is /assets/images. So put:

<img src="/assets/images/logo.jpg" />

/assets should stay out of /app. That way, if you build with angular cli they will be added in your /dist folder.

Absolute path not working in Vite project React TS

There are two problems here:

Tell typescript how to resolve import path
Tell vite how to build import path

You only tell typescript how to resolve, but vite don't konw how to build. So refer to the official document resolve.alias, maybe this is what you want:

// vite.config.ts
{
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
    ],
  },
  // ...
}

You can import path like this (or any module under ./src):

import Test from "@/components/Test";
import bar from "@/foo/bar"

Moreover, you can use vite plugin vite-tsconfig-paths directly, it makes you don't have to manually configure resolve.alias

Src Absolute Path Problem