Wrong image path within inline styles in the head

I’m adding some inline styles to the <head> using file_get_contents(some-style.css) and the wp_head hook. My relative image paths don’t work once they are added to the head, although they do work if I just use <link> to load the file instead.

My path:

theme_dir/assets/imgs/my_image.jpg

I’ve tried:

'/assets/imgs/my_image.jpg'
'../assets/imgs/my_image.jpg'
'assets/imgs/my_image.jpg'

The only solution I have to this issue is doing a search and replace on the results of file_get_contents and add the template_directory_uri path to it. I would rather not have to do that.

I also tried adding a base url as the theme directory, which solved the issue, but then I create other issues (eg. hashes won’t work).

I am also aware of the function wp_add_inline_style, but that requires another style to have already been loaded, which is what I am trying to avoid.

Is there a better solution to what I am trying to achieve? Or is there a path I can use?

Solutions Collecting From Web of "Wrong image path within inline styles in the head"

If they are inline, your image paths should be /wp-content/themes/theme_name/ and then whatever the directory is in.

Since you are already loading them via file_get_contents(), why not do a search & replace and use the full URL for them? With proper caching, this shouldn’t make any impact on the load time itself.

The usual way is to enqueue your styles via wp_enqueue_style(). Plugins like W3 Total Cache or WP-Optimize offer solutions to merge all those loaded styles – this will only work if you properly enqueue them and not if you inline them.