Theme Images

[danielflippance]

I've followed the instructions in these two threads but I'm not able to get images from my theme to show in a browser.

• https://community.nodebb.org/topic/2211/how-to-use-images-in-themes
• https://community.nodebb.org/topic/1636/can-t-find-css-images/2

My theme is structured like this:

I have the following in my theme.json:

{
    "id": "nodebb-theme-mytheme",
    "screenshot": "screenshot.png",
    "staticDirs": {
        "images": "static/images"
    } 
}

HTML added to header.tpl:

<a id="homeLink" href="/myHref">&nbsp;</a>

Here's the CSS:

#homeLink {
    background-image: url("/plugins/nodebb-theme-mytheme/images/lpb-logo.jpg");
    border: solid 1px red;
    height: 65px;
    width: 302px;
}

Here's what I see

I've tried adding the image using CSS with all the following URLs, restarting NodeBB after each change to the CSS but none have worked:

background-image: url("/plugins/nodebb-theme-mytheme/images/lpb-logo.png");
background-image: url("/plugins/nodebb-theme-mytheme/static/images/lpb-logo.png");
background-image: url("/plugins/mytheme/images/lpb-logo.png");
background-image: url("/plugins/mytheme/static/images/lpb-logo.png");
background-image: url("/nodebb-theme-mytheme/images/lpb-logo.png");
background-image: url("/nodebb-theme-mytheme/static/images/lpb-logo.png");
background-image: url("/mytheme/images/lpb-logo.png");
background-image: url("/mytheme/static/images/lpb-logo.png");
background-image: url("/images/lpb-logo.png");
background-image: url("/static/images/lpb-logo.png");

I've also tried using the URLs directly in the browser but that didn't work either. I've tried all the same URLs but with a .png file but no difference. I've tried prefixing everything with http://localhost:4567 but no difference.

Is there some kind of cache I need to flush or similar?

[pichalite]

@danielflippance what do you get when you open this in a browser?

http://[yourdomain]/plugins/nodebb-theme-mytheme/images/lpb-logo.png

[danielflippance]

@pichalite said:

]/plugins/nodebb-theme-mytheme/images/lpb-logo.png

I get a Not Found error:

[pichalite]

@danielflippance works for me on my custom theme

what does the URL in your config.json look like?

[danielflippance]

From config.json:

"url": "http://localhost:4567",

I tried it with "http://127.0.01:4567" and "http://0.0.0.0:4567" with the same results.

[yariplus]

@danielflippance

You need to add the staticDirs to plugin.json

[danielflippance]

Thanks @yariplus. I moved the staticDirs to a new plugin.json, I added a package.json and the problem is now fixed.

[santoshkumarr]

@yariplus I'm trying in the same way like you mentioned.
created: static/images in node_modules/nodebb-theme-persona
in plugin.json i have added the below line
"acpScripts": [
"lib/admin.js"
],
"staticDirs": {
"images": "static/images"
}
and in the header file i'm trying to get the image like below
<img src="/plugins/nodebb-theme-persona/images/logoWithText.png" />

but this is not working. Please suggest what am i doing wrong

Thanks