Images are not displayed on localhost:3000

Hello, I have an issue with displaying images with sage10 theme on localhost:3000, png and jpg are not shown, however, if I choose any SVG it shows just fine. It is just a fresh install, nothing has been changed there. As I understand for the new sage 10 I should only change the proxy setting inside bud.config.js in order to get a project running;

http://vibespot.test/wp-content/uploads/2021/12/Haeckel_Muscinae.jpg - works
http://localhost:3000/wp-content/uploads/2021/12/Haeckel_Muscinae.jpg - does not work

my proxy looks like this .proxy(‘http://vibespot.test’);
Laravel valet as a server;

I am ready to provide more info regarding this issue if needed

Howdy!

wp-content/uploads/2021/12/Haeckel_Muscinae.jpg

This appears to be an image outside of the theme and unrelated to Sage? Are you saying that during yarn dev with Bud that the image source is incorrect and resulting in a 404?

What version of Bud are you running (check package.json)?

I use ACF Pro in the project and display images as I usually do inside sage 9. I have also tried header_image() function to display the image, but still the same problem, images don’t show up when localhost:3000 is running. I also see some errors from “bud hmr” inside the console.

Bud version: “@roots/bud”: “5.0.0-next.18”

I’m having the same issue with all images. Using @asset in blade files or regular php functions like post_thumbnail.

Images appear as though the source is incorrect. an example image src being output: http://localhost:3000/wp/wp-content/themes/theme-name/public/images/img-01.jpg

Styles and scripts are being loaded and updated when running yarn dev but proxy url does not appear to be working for images.

Using a vanilla sage install with bud 5.0.0-next.20

Browser console warning:
DevTools failed to load source map: Could not parse content for http://localhost:3000/wp/wp-content/themes/theme-name/public/overlay.web-component.js.map: Unexpected token < in JSON at position 0

When viewing the site via the local url without bud running, images being called via the_post_thumbnail load but with images being called using the @asset directive the ‘assets’ directory is being ommitted from the src url

Can you try this in your bud configuration :

.proxy({
  url: 'http://vibespot.test',
    replace: {
    href: true,
    window: true,
    publicPath: false,
  },
})

I was facing the same error

1 Like

Many thanks Aki, unfortunately this didn’t work for me. The assets directory is still being ommitted from the image src url

1 Like

Same problem here using the latest Bud 5.0.0.

I seem to partly have this issue as well (some images work, others not) - probably related. In addition to that it looks like that the dev server does proxy only the web root (http://localhost:3000/). If I try to use any other permalink structure than basic (http://localhost:3000/?page_id=xx) I end up with a message “Sorry can’t find that!” which isn’t an Apache 404 (obviously).
I’m a bit out of ideas as I use two slightly different dev setups and both seem to fail with this.

The fact that I couldn’t find any similar problems seem to hint that it might be a problem on my side. Unfortunately I’m not very skilled regarding javascript and I currently have no clue what could be the problem (besides that I have to use Apache instead of nginx - but I never came across such a problem and both slightly different dev boxes have this problem).

I’m using sage & bud 5.0.0-next.18 on Linux (natively, no VM). Any permalinks work fine on the local domain - but fail when I start the dev server.

I already tried @Aki’s suggestion - but without success.

Thanks, works for me (bud 5.0.0) but with Nginx.

Sorry if I bring this up again but I still have no idea why permalinks aren’t proxied correctly in dev mode. Basic link format works pretty well but with permalinks activated (any format) I run into a not found error. The local domain works just fine.

I’d be glad if someone could push me into the right direction.

(Apache2, PHP7.4, Bud/Sage 5.0.0-next.18)

This topic was automatically closed after 42 days. New replies are no longer allowed.

To all those who couldn’t find a solution, yet: I’m not aboslutely sure if your issues are related to mine at all but thanks to @kellymears I’ve been able to solve mine (assets not being loaded correctly & any permalink structure besides “basic” won’t work on yarn dev) by installing Browsersync.

See also here.

2 Likes

Sorry I didn’t get to replying to this sooner but you should try again with acorn, sage and bud’s newest releases, which absolutely solve this problem (and many others!)

1 Like