Referencing images from a JSON file

[jonathan-roy]

Hi,

Consider the following files inside src/renderer:

• test.json with the following content:

{"icon": "@/img/test.png"}

• img/test.png
• index.js which creates the Vue app with the following:

import test from "./test.json";
new Vue({
    "data": () => ({
        "src": test.icon
    }),
    "template": '<img :src="src" />'
});

But the URL from test.json does not seem to be processed by Webpack. I also tried to change the URL to ./img/test.png which does not work better. I figured out that using ./test.png actually works but I’m not sure why...

What is the proper way to handle such cases?

Thanks!

[jonathan-roy]

I also noticed that I have the same problem if I set the image source directly to @/img/test.png in the template property:

new Vue({
    "template": '<img src="@/img/test.png" />'
});

@ is not replaced... Am I missing something?

[loopmode]

The thing is: Webpack needs some kind of reference to a file in "javascript" to bundle that file, the file must become a dependency of some module. Simply having the path to a file written in "some string" (from webpack's perspective) won't bundle that file.

So, if you had

{"icon": require("@/img/test.png")}

That would be actually picked up by webpack - but obviously not in a json file, which is a simple text file.

You could try this tho:

new Vue({
    "data": () => ({
        "src": require(test.icon) // <- require it
    }),
    "template": '<img :src="src" />'
});

...and it might work out of the box, but I believe it won't.

What you can do, however (and probably in addition), is use webpack require.context.

You create such context for some directory in the project, and webpack will basically index all the files inside that directory and keep them ready for bundling in case some dynamic require/import statement points to a file in the context.

So, the idea in a nuthell:

• in order for something to be bundled by webpack, it must become part of the dependency tree, by being imported or required
• when you directly import or require a file, webpack picks it up as usual and bundles it
• when you must require or import a file using a string variable for the path, you need to "help" webpack by providing a context

See https://survivejs.com/webpack/techniques/dynamic-loading/ See https://github.com/webpack/docs/wiki/context#requirecontext

Hope this helps...

[jonathan-roy]

Thank you very much for your explanations, it's now clearer to me! However, I have the following warning when trying with "src": require(test.icon), which prevent from starting the application normally:

Critical dependency: the request of a dependency is an expression

If I try with "src": require.context(test.icon), I have the following blocking warning:

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[harshblip]

Maybe i can help,

you will first need to provide full url of the image. Since your images are hosted on GitHub, like in the images folder the URLs would follow this pattern: https://raw.githubusercontent.com/{username}/{repo}/{branch}/path/to/image.

Here, Replace {username} with your GitHub username, {repo} with the name of your GitHub repository, {branch} with the branch name (usually master or main), and path/to/image with the actual path to your image in the repository.

Tell me if it works :)