Getting broken image in page.js react

[rafaelrdealmeida]

I am trying to insert an image on the website page, but the link is broken and I am not able to identify where I am going wrong.

the page is this: https://labriunesp.org/pod-ri

the code is this: pod-ri.js

any indication of where I'm going wrong?

tried import imageUrl from './img/projects/extension/pod-ri/logo-site.png' to no avail

[slorber]

So, in the end your image is hosted at: https://labriunesp.org/img/projetos/extensao/pod-ri/logo-site.png

Your code says: imageUrl: './img/projetos/extensao/pod-ri/logo-site.png',

• it uses useBaseUrl which does not really make sense for relative paths (we never want to add baseurl because they are relative anyway... it only make sense to eventually add the baseurl "/" prefix to absolute paths starting with /

In the end you end up with a bad path in the DOM

Indeed this does not work: https://labriunesp.org//./img/projetos/extensao/pod-ri/logo-site.png

But this works: https://labriunesp.org/./img/projetos/extensao/pod-ri/logo-site.png

So, just remove the useBaseUrl call to avoid adding unnecessarily the prefix.

Tried import imageUrl from './img/projects/extension/pod-ri/logo-site.png' to no avail

. in node import means "look inside the current folder. Your image is not in src/pages/img so you must use another import like @site/static/img/projects/extension/pod-ri/logo-site.png instead.

You can also move the image in src/pages if you want to move it closer to where it is used.

In general, I'd recommend to use imports for various reasons (asset will be processed by webpack, a hash will be added to the name for better CDN caching, and if your import works you'll be sure to not have a broken image in your prod deploy).

If you want to keep your image in static you'd rather use absolute paths anyway, starting with / (on which you apply the baseurl). I think just removing the . might solve your problem.

[rafaelrdealmeida]

Thank you very much for the nominations!
Now it works. I was confused about the baseUrl

[rafaelrdealmeida]

hi @slorber,

I understood how to deal with images that are in static/img folder, but I'm not getting the same result with images placed in folders outside static folder. I've only been able to get it to work with import from, but I don't think it's the best way if we have to insert with multiple images.

for example, on the page the first image comes from import from, but the others are called by the function they are elements of a variable (see). Tried in several ways, but images are not brought into build

Could you tell me what I'm doing wrong?

best

documentation consulted: https://docusaurus.io/docs/static-assets

[slorber]

but I don't think it's the best way if we have to insert with multiple images.

You can't use a wildcard or things like that in imports but you can use some more advanced features of Webpack to require all images of a given folder: https://webpack.js.org/guides/dependency-management/#require-with-expression

However I'd rather recommend that you import all images with static paths (no variable).

We do that on Docusaurus site:

https://github.com/facebook/docusaurus/blob/master/website/src/pages/index.js#L23

Note, we are using the ideal image plugin, you may need to use require("./imgs/xyz.png").default instead.

I also think it is not recommended by Webpack to use new URL('./imgs/xyz.png', import.meta.url).toString(), as it is using std JS apis instead of webpack proprietary apis. Not 100% sure it will work, it may require #4708 to be merged first

In any case, you can't do require(someVariable): Webpack needs to be able to understand which image you plan to use with static analysis, without running your code, so you need static strings or something webpack can understand