Having trouble extracting image link because the selector is not functioning

Apologies if this question seems basic, but I am currently working on a simple project as a beginner and could really use some guidance. I'm struggling to extract the image link text (src) and can't seem to get the right selector. Below is an example of the CSS from the website:

<img class="s-item__image-img selectorgadget_selected" alt="Nintendo Switch (Red &amp; Blue Joy-Con) & accessories!  6 Month Warranty!" src="https://i.ebayimg.com/thumbs/images/g/n8QAAOSwdepMFw0/s-l225.webp"

I've attempted something like this, however, it's not capturing anything:

product_image = product.css(
'.s-image__image-img::attr(src)').extract_first()

I have tried other selectors, but the presence of 'alt' in between is causing issues unlike the others. Any assistance would be greatly appreciated.

Answer №1

Correction needed: The correct syntax is .s-item instead of .s-image.

product_image = product.css('.s-item__image-img::attr(src)').get()

IMPORTANT: Avoid using .extract_first() and .extract() methods, as the behavior of .extract() can be inconsistent. Use .get() or .getall() instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS not displaying properly

I've been working on a React.js web app with Material UI components. The challenge I'm facing is with one specific component that handles the website management and displays a preview of custom content. This website, unlike the rest of the app, u ...

The system is unable to retrieve the value of the property which is set as null

I'm trying to figure out how to store the input value of name_enter into the variable userName. However, every time I attempt this, I encounter the following console error: Uncaught TypeError: Cannot read property 'value' of null function ...

What is the best way to incorporate an external .css file into my Angular project by referencing its URL?

I'm managing a collection of CSS files online and I need to incorporate each one into my project based on its specific requirements. One component in particular is connected to different numerical IDs in the router. I am looking for a way to dynamica ...

What is the best way to deactivate a hyperlink of an <a> tag specifically for a particular child within an element?

Imagine you have a clickable container that leads to another page when clicked. However, there are elements within this container that you want to disable so that clicking on them does not activate the link. How can this be achieved? For instance, ...

Stop scrolling on the body of the webpage

I am struggling to find a solution to completely disable scrolling on the HTML body. I have experimented with different options, but none seem to work as desired: overflow: hidden; did not disable scrolling, only hid the scrollbar. position: fixed; w ...

Is it possible to utilize bootstrap sizing by considering the size of the containing div?

Setting the Scene Imagine a scenario where two divs are placed side by side. div1: 500px wide div2: taking up the remaining width The goal is to make the items in div2 responsive using Bootstrap so that classes like mt-sm-3 can be utilized for differen ...

What is the best way to alter the font size in an SVG?

I have incorporated an SVG icon into my website and obtained the following code from Adobe Illustrator: <svg id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448.05 436.7"><path d="M190.5,66.9l22.2-22.2a23.9, ...

Update overall font size to be 62% for a consistent look across the website

Recently, I developed a browser extension that adds an overlay button to the LinkedIn website. Everything was running smoothly until I discovered that LinkedIn uses a global font-size: 62,5% that completely messes up my design.. https://i.stack.imgur.com ...

What is the best method for getting rid of blank white space on my website?

Having some trouble removing unnecessary white space on my website. The goal is to have the main text and logo centered on an image background, but I've been unsuccessful so far. I've experimented with different CSS properties like overflow-x: ...

Position the navigation content slightly to the left and right using Bootstrap 5

Struggling to align links in a Navbar to different sides? I attempted using the classes "ms-auto" and "me-auto" on two lists, but had no success (everything stayed to the left, as shown in the picture). Essentially, I want the "Dropdown" item on the right ...

What is the best way to showcase top-rated posts from my feed of posts?

I have a basic PHP script that allows users to post without logging in. Once they submit their posts, the posts are displayed below in a feed similar to Facebook's news feed. I'm now looking to extract the three most liked posts and display them ...

arbitrary arrangement of elements within container element

I need assistance with positioning random elements inside a DIV. These elements have varying LEFT and TOP positions within the parent element <div class="main"></div>. How can I mathematically calculate and set these positions using JavaScript/ ...

Is it true that nested CSS IDs function correctly in Firefox, but not in IE8?

My HTML is structured like this: <div id="content"> <div id="asection"> <h1>Some Text</h1> </div> </div> The CSS properties I'm using are as follows: h1 { color:#873C62; font-size:32px; line-heigh ...

Utilizing unique background images tailored to different screen resolutions

In order to enhance the user experience on my website, I am looking to implement a feature that dynamically changes the background images based on the user's screen resolution. My plan is to use a small snippet of JavaScript within the <head> s ...

Creating an image overlay within HTML text in NSAttributedString with CSS: A step-by-step guide

I am currently working on extracting HTML text that includes a YouTube video. In order to showcase this video, I have implemented a preview image. The original text is as follows: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do ei ...

Troubleshooting a jQuery Selector Issue with a Dynamic Form

I developed a jQuery function to search for all the necessary inputs in a specific section of a website. function check_property_vars() { jQuery(this).parents('.property_group').find('div[id^="property_group_"]:input[required]:visible&a ...

The IIS URL rewrite is causing issues with the rewriting of CSS and JS files

Struggling with my URL rewrites - every time I set up a rewrite for a page, it ends up affecting the CSS and JS files linked within the webpage, resulting in them not displaying properly. In an attempt to fix this issue, I tried using fully qualified path ...

Guidelines for positioning social media icons to the right of the collapsible navigation bar in Bootstrap 3

I am having trouble aligning my social media icon with the navbar menu to the right. There seems to be a gap when I try to do it. The social icon is currently in a separate row, while the navbar is also in a separate row. I just want to align them both to ...

The background image for a pseudo element is not functioning as expected

After researching various solutions on Stack Overflow, I attempted to set fixed dimensions for the pseudo element (height: X px; width: X px;), but this is not an ideal solution for me as I require a scalable and responsive image that fits its parent eleme ...

What is the best way to create an XPath that can target specific data in an HTML table column that might change its position?

List<WebElement> brandNames = driver.findElements(By.xpath("//tbody/tr/td[1]")); I am attempting to create an xpath for "Brand Name" that will capture all the values under the "Brand Name". Each time I refresh, the "Brand Name" moves to an ...