some websites like digikey, for img tag has two source(small version and big version) :
<img itemprop="image" class="pszoomer" zoomimg="//media.digikey.com/Renders/STMicro%20Renders/497;144LQFP-1.6-20x20;144.jpg" border="0" height="64" src="//media.digikey.com/Renders/STMicro%20Renders/497;144LQFP-1.6-20x20;144_tmb.jpg" alt="STM32F407ZET6 - STMicroelectronics" title="STM32F407ZET6 - STMicroelectronics">
I want to download image link in zoomimg attribute , any suggestion ?
Related
Versions:
React: 18.2.0
NextJS: 12.2.0
Simple image asset is just refusing to load when is used inside <img /> tag with src attribute set to data:image/svg+xml;utf-8,[svg data here]
When I paste this url data:image/svg+xml;utf-8,[svg data here] directly in the browser everything loads fine as expected the source image is there and all other things. The next.config has all the required image configuration and in the code for the image currently we use normal <img /> tag. The asset loads fine when its not called like svg, e.g. src="https://external-api/image.jpeg" In the network tab the response for the image is 200 all the time, but the preview shows only the svg styles with the default placeholder for missing image.
If I paste the image in THIS online encoder the image is NOT loading (behaves like in my problem), but if I copy the encoded url from the page and paste it in new chrome tab the image loads w/o any problem.
Examples:
Source image
Svg code that goes in to the src
data:image/svg+xml;utf-8,%3Csvg viewBox='0 0 1044 1054' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg opacity='.7' filter='url(%23a)'%3E%3Cpath d='M309.796 414.322 190.497 535.433 467.98 803.76l119.299-121.111-277.483-268.327Z' fill='%23000'/%3E%3C/g%3E%3Cmask id='b' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='116' y='91' width='837' height='837'%3E%3Crect width='440' height='1000' rx='220' transform='matrix(-.70604 .70817 .70746 .70675 335.664 0)' fill='%23000'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath fill='url(%23c)' d='M109 84h850v850H109z'/%3E%3C/g%3E%3Crect width='294.223' height='822.461' rx='147.112' transform='matrix(-.70575 .70846 .70718 .70704 228.716 325)' fill='url(%23d)'/%3E%3Cdefs%3E%3Cpattern id='c' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23d'/%3E%3C/pattern%3E%3Cfilter id='a' x='.497' y='224.322' width='776.782' height='769.437' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='95' result='effect1_foregroundBlur_3332_33632'/%3E%3C/filter%3E%3Cimage id='d' width='1' height='1' xlink:href='https://fakeimg.pl/250x300/fff000/'/%3E%3C/defs%3E%3C/svg%3E
And how is renderd in the app
What was tried:
If the image is encoded in base64 works, but with huge performace drawbacks mainly on older IOS devices.
Next config option for dangerouslyAllowSVG doesn't change anything...
I'm having a backend server with an upload folder directly in the root.
In my backend, http://localhost:4000, I have my upload folder and I'd like to display the image that matched the url given for each element I have in my backend :
const url = "http://localhost:4000/"
{filteredDrawings && filteredDrawings.map((drawing) => (
etc...
<div className='cardimage-container'>
<Card.Img variant='top' src={`${url}/${drawing.imageLink}`} />
</div>
When checking my browner, i have src="upload/testupload.jpg" displayed as src of the image but I have nothing displayed
I wrote app.use("/upload", express.static(path.join(__dirname, "../upload"))); in my my backend app.
When I try http://localhost:4000/upload/uploadtest.jpg, I have "Cannot GET /upload/uploadtest.jpg"
Thanks in advance
Ok problem solved, the issue was the quote not being ' but `
app.use(`/upload`, express.static(`upload`));
the error you faced is because the route /upload/uploadtest.jpg is not defined well as a route in the nodejs , you should read the document based on id or other identifier and return as a binary.
as for react try {{ }} without $
in this case it should be worked without any problem
I am implementing a reactjs app and in development mode everything is okey with images
<img src={`/images/logo.jpg`}></img>
But when I want to deploy my app using npm run build I tried to use environnement variable PUBLIC_URL but i have issues with loading images (js & css are loaded correctly)
<img src={`/${process.env.PUBLIC_URL}/images/logo.jpg`}></img>
I read that the value of PUBLIC_URL can be set in package.json properties homepage (i am using create-react-app)
"homepage": "https://localhost:8080/FOO-API/REACT-APP/",
When i try to print its value
console.log('public url : ', process.env.PUBLIC_URL)
I got the right path public url : /PROJET-API/REACT-APP
But the image does not shows up and its URL is wrong
http://foo-api/REACT-APP/images/logo.jpg
the https://localhost:8080/ part is gone and FOO-API is converted to lowercase
the URL should be https://localhost:8080/FOO-API/REACT-APP/images/logo.jpg
I think the issue is first / here,
<img src={`/${process.env.PUBLIC_URL}/images/logo.jpg`}></img>
As you can see, the result of console.log
console.log('public url : ', process.env.PUBLIC_URL)
is,
public url : /PROJET-API/REACT-APP
Which alreay contains / at the beginning.
So your URL is created as,
<img src={`//PROJET-API/REACT-APP/images/logo.jpg`}></img>
Notice that it contains 2 / at the beginning.
You just need to remove the / from beginning, like:
<img src={`${process.env.PUBLIC_URL}/images/logo.jpg`}></img>
I have images in webroot and i want to access them from url in cakephp
something like :
http: www.abc/cakephp/app/webroot/img/image.jpg
try this..
A simple image tag
<img src="<?php echo $this->webroot; ?>img/foo.gif" .../ >
A background image within a table cell the old way:
<td background="<?php echo $this->webroot; ?>img/foo.gif">
The scenario is I need to check all the by default elements present on a web page. I am trying to check the headers available on a web table.
I am able to find all headers except one whose name is IP Address / Host Name
<div id="ctl00_ContentPlaceHolder1_RadGrid1_GridHeader" class="rgHeaderDiv" style="overflow: hidden;">
<table id="ctl00_ContentPlaceHolder1_RadGrid1_ctl00_Header" class="rgMasterTable rgClipCells rgClipCells" style="border-color:#6788BE;border-width:1px;border-style:solid;width:100%;table-layout:fixed;overflow:hidden;empty-cells:show;">
<colgroup>
<thead>
<tr>
<th class="rgHeader rgSorted" style="font-weight:bold;font-style:normal;text-decoration:none;text-align:left;" scope="col">
IP Address / Host Name
<input class="rgSortAsc" type="button" title="Sorted asc" onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl02$ctl01$ctl06','')" value=" " name="ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl02$ctl01$ctl06">
</th>
</tr>
</thead>
<tbody style="display:none;">
</table>
</div>
I tried finding using below codes but failed to do so.
driver.findElement(By.xpath("//div[#id='ctl00_ContentPlaceHolder1_RadGrid1_GridHeader']//a[contains(#href,'IP Address / Host Name')]"));
driver.findElement(By.xpath("//a[contains(#href,'IP Address')]"));
driver.findElement(By.linkText(IP Address / Host Name));
I tried with changing div id and its value ti table id and corresponding value too but script fail saying not able to find element with xpath...
My script always says failed to find element with id... or xpath...
Please help.
If you're having trouble accessing the element programmatically, my advice would be to use the Selenium IDE to select the element, then export the test case by going to File > Export Test Case As... > Java / JUnit 4 / WebDriver.
I tried this myself and the resulting code uses:
driver.findElement(By.linkText("IP Address / Host Name"))
It seems to work fine in the Selenium IDE. I haven't tested the resulting Java code. - From your syntax, it appears you're using Java.
You say you've tried using By.linkText(), so maybe there's a bigger problem? (I notice you don't have quotes around your By.linkText() example, but I assume this is a typo.)