admin管理员组

文章数量:1198385

Situation:

I'm trying to migrate static page made with HTML/CSS/JS into Wordpress. The images won't load. They work in HTML, but when I migrate into PHP there are only alt-descriptions visible. Upon examining it in the Mozilla Dev Tools, there is a correct link to the image that displays the image upon clicking. However, on the migrated WP site there's an error "Couldn't load image". Directory seems correct, but image just won't load.

What I tried.

1. get_theme_file_uri()

<img src="<?php echo get_theme_file_uri('/img/landing/landing__cat-headphones--fb.png') ?>" class="d-block mx-lg-auto img-fluid landing__cat-headphones--img" alt="lingcat-headphones" loading="lazy">

This one gets me a working link in the dev tools that I can click and it opens the image correctly. However on the page only alt-desc appears and dev tools displays "Couldn't load image".

2. get_template_directory_uri()

<img src="<?php echo esc_url( get_template_directory_uri() . '//img/landing/landing__cat-headphones--fb.png' ); ?>" class="d-block mx-lg-auto img-fluid landing__cat-headphones--img" alt="lingcat-headphones" loading="lazy">

This one does pretty much the same thing like the method above.

3. Uploading the image into Media library and pasting the code to the src

<img src="http://localhost/wp-content/uploads/2022/05/landing__cat-headphones-fb.png" class="d-block mx-lg-auto img-fluid landing__cat-headphones--img" alt="lingcat-headphones" loading="lazy"> Again, the same thing. I can access the image via dev tools, so I'd assume the dir is correct, but WP just won't display the image.

What else could I do?

Situation:

I'm trying to migrate static page made with HTML/CSS/JS into Wordpress. The images won't load. They work in HTML, but when I migrate into PHP there are only alt-descriptions visible. Upon examining it in the Mozilla Dev Tools, there is a correct link to the image that displays the image upon clicking. However, on the migrated WP site there's an error "Couldn't load image". Directory seems correct, but image just won't load.

What I tried.

1. get_theme_file_uri()

<img src="<?php echo get_theme_file_uri('/img/landing/landing__cat-headphones--fb.png') ?>" class="d-block mx-lg-auto img-fluid landing__cat-headphones--img" alt="lingcat-headphones" loading="lazy">

This one gets me a working link in the dev tools that I can click and it opens the image correctly. However on the page only alt-desc appears and dev tools displays "Couldn't load image".

2. get_template_directory_uri()

<img src="<?php echo esc_url( get_template_directory_uri() . '//img/landing/landing__cat-headphones--fb.png' ); ?>" class="d-block mx-lg-auto img-fluid landing__cat-headphones--img" alt="lingcat-headphones" loading="lazy">

This one does pretty much the same thing like the method above.

3. Uploading the image into Media library and pasting the code to the src

<img src="http://localhost/wp-content/uploads/2022/05/landing__cat-headphones-fb.png" class="d-block mx-lg-auto img-fluid landing__cat-headphones--img" alt="lingcat-headphones" loading="lazy"> Again, the same thing. I can access the image via dev tools, so I'd assume the dir is correct, but WP just won't display the image.

What else could I do?

• images
• uploads
• migration
• directory

Share Improve this question asked May 24, 2022 at 15:23 ScorpVisualScorpVisual 1122 bronze badges 4

• 2 WordPress doesn't display images. The browser displays image served by the server. All WordPress does is output the URL. If the URL is correct in the HTML then the issue is with your browser or the web server. Does the network tab show any errors loading the images? – Jacob Peattie Commented May 24, 2022 at 15:25
• imgur.com/AZSSiqF This is what's there. There are bunch of errors, but they are fb-plugin and font related. If I click the link in the src, the image displays. The same issue occurs in Edge. – ScorpVisual Commented May 24, 2022 at 15:41
• Alright, nevermind. Due to your comment I decided to exam the HTML around rather than beating around the src-bush and it turned out that the <picture> thing was the one causing problems. Once I took the image out of it, it displayed itself properly. Thanks a lot for responding, it was instrumental to the fixing of the problem! – ScorpVisual Commented May 24, 2022 at 15:46
• 1 If you're using a <picture> element then the browser is going to choose an image <source> based on its type and media query. You haven't given a media query so it's probably just choosing the first that's supported, which could be either, and I notice those are using relative URLs that are not pointing to the theme directory. – Jacob Peattie Commented May 24, 2022 at 15:58

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Due to Jacob Peattie's comment I decided to exam the HTML around rather than beating around the src-bush and it turned out that the thing was the one causing problems. Once I took the image out of it, it displayed itself properly.

本文标签： uploadsMigration to WPCouldn39t load image