image src props for urls

[pak11273]

Version

2.1.0

I have an option to use any url for the source to my image component and it works. However, in the console I keep getting a Type error in the console:

Uncaught TypeError: Cannot read property '__reactInternalInstance$h4ttge1zri8' of null

Steps to reproduce

const Img = styled.img`
    src: url(${props => props.src});
`

<Img src="http://some url to a picture.jpg" />

Is there another way to do this?

[morajabi]

What is src property in your CSS? What to do you want to achieve with this styled component named Img?

[pak11273]

src is the css property. I want to get rid of the error I posted.

[morajabi]

There's no CSS property named src.

What's wrong with this code alone?

<img src="http://some url to a picture.jpg" />

Why do you need the Img component?

[pak11273]

Why does my component still work if there is no src property? Maybe I should clarify what I'm asking. Let's say I want a stylized image component:

const HeaderImg = styled.img`
  width: 100px;
  height: 100px;
  border: 1px solid blue;
`

But for each instance of the component I want the image source to be different:

const HeaderImg = styled.img`
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  **src: ?**
`

I'd gladly use the built-in <img> tag, but then what's the point of styled components?

[pak11273]

Ok. I just got the same error using <img> tag. So this is not a styled-components issue, it's a reactjs issue. I think what I have already is fine. Thanks for the help.

[pak11273]

if anyone is having this issue the problem I was facing is solved here: facebook/react#6472

[Caryyon]

@pak11273 isn't this just because you are adding a src style property? What you wanted to do is

const HeaderImg = styled.img.attrs({
    src: 'image url here'
})`
width: 100px;
height: 100px;
border: 1px solid blue;
`

This allows you to add the prop src to the image component and assign it a value. Rather than trying to add it to the styling css which won't work.

[pak11273]

@Caryyon I haven't tested that out yet, but I want the src prop to be dynamic. So I could do this:

<HeaderImg src={ any url I want } />

[Caryyon]

@pak11273 the line you just wrote would work fine for that. Are you then asking how would you use the src prop inside of your css? I only ask because i've not had any issues with the img tag and i've been using it since v1 of styled-components.

when you make the styled version of the img html tag. it does a props={...props} so you get all the previous props of a img jsx tag. This would allow you to write the line you just wrote above and have it be totally dynamic.

<HeaderImg src={'https://cdn.cnn.com/cnnnext/dam/assets/180301124611-fedex-logo.png'} />
<HeaderImg src={'https://i.pinimg.com/originals/d0/54/89/d054890aa6a20fe5273d24feff7acc79.jpg'} />

the above code would render two different images as you've given them 2 different urls.
Does this help? Am I getting to your issue? Are you even still having this issue?

[pak11273]

No I am not having this issue anymore. I forgot how I fixed the issue but I resolved it over here. The error was from react and not styled-components.

[LouiseReid]

Kind of related to this - how can I conditionally set an image src on break point?

I've tried this but its not right

const TitleBarLogo = styled.img.attrs({
  src: mobileLogo
  @media (min-width: 768px){
    src: desktopLogo
  } 
})``;

[pak11273]

@LouiseReid You might try display: none

[Caryyon]

@LouiseReid that's where you might have to write a higher order component to wrap this one and adjust its props according to the width of the window.

At this point though i think you are better off making a <div> with a background-image of the dynamic images. You will have to do some extra work with aria-labels to get the same image ADA compliance, but you would have a far easier time switching out images on the fly.

const Image = styled.div`
    background-image: url('/staticImageAsset.png');
    background-position: center;
    background-size: cover;
    @media (min-width: 768px) {
        background-image: ${props => url(`${props.dynamicSrc}`)};
    }
`

[LouiseReid]

Thanks @Caryyon, thats what I ended up doing. It just felt a bit icky as I'd lose alt tags etc

[oriabukha-chwy]

This is not so right. the idea is: To have img tag and src attribute changing depending on device width.
If you use styled.img, this trick doesn't work in Safari, and Firefox.

[jacquesme]

const MyImg = styled.divbackground-image: url(${props => props.src});;