CODEWITHSUNDEEP
vue.jsnuxt.js
AMDP
AMDP

Reputation: 365

vue access to images

I'm trying to view an image in one of my pages. I'm on a latest node-express-vue-nuxt-babel setup. My final goal was:

<img :src="'@/assets/images/projects/' + project.image" width="50px" />

I started with the above, but I got a 404. So I tried with a specific image:

<img src="@/assets/images/projects/5a2db62e346c1.jpg" width="50px" />

and it worked, but going back to dynamic source didn't and:

to <img :src="'@/assets/images/projects/5a2db62e346c1.jpg'" width="50px" />

was enough to produce the 404 again. The 404 was in the console, the page was loading fine with no errors but alas no signs of the image(s). Inspecting the elements made me notice that the dynamic :src became:

<img src="@/assets/images/projects/5a2db62e346c1.jpg" width="50px" />

and the 'static' src became:

<img src="/_nuxt/assets/images/projects/5a2db62e346c1.jpg" width="50px" />

So to make it work I had to renounce to the initial "@" and substitute it with "_nuxt":

<img :src="'_nuxt/assets/images/projects/' + project.image" width="50px" />

Ok, nice, but.. why?

Upvotes: 1

Views: 2771

Answers (4)

AMDP
AMDP

Reputation: 365

It worked also with backticks:

<img :src="require(`@/assets/images/projects/` + project.image)" width="100px" />

Thanks guys!

Upvotes: 0

undefined
undefined

Reputation: 191

Do this: <img :src="require('@/assets/images/projects/' + project.image)"/>

Upvotes: 4

Radu Diță
Radu Diță

Reputation: 14211

You are using webpack for bundling the application.

At a very high level webpack looks for require and takes care of bundling your scripts. Exactly what that means depends on your specific configuration, but it usually gathers all the js files in one file, usually minifies and removes unused code.

Webpack is not limited to js files. By the use of plugins it can handle extracting images from html files, load resources from urls and much more.

The way it ends up loading images is still by the use of require, the plugins just plug everything in so webpack can handle them. That being said, require is a compile time feature and if the path can't be determined at compile time webpack will not work. Webpack will usually translate the image path to a path that's available at runtime (usually they are different and depend on your webpack config).

When you bind src like this:

:src="'@/assets/images/projects/' + project.image"

The path can't be determined at compile time and as such vue will resolve it at run time, but webpack already finished and it will not translate your path.

There are a couple of ways to handle this:

  1. As you found out: using a static runtime path, that is not handled by webpack, will work. The downfall is that if you change the way you build your project you'll need to update all references (in your case _nuxt). Note: if using vue.cli, you usually get a folder called static that is used exactly for this.
  2. Use a binding, but bind to the run time path. This has the same downside as above and also the following: webpack has cache-busting technics that mangle file names, so knowing the final name of an asset that is handled this way by webpack is virtually impossible.

Upvotes: 0

Rashedul Islam Sagor
Rashedul Islam Sagor

Reputation: 2069

VueJs

There are several asset URL transforms rules in vuejs. Here is one of them:

If the URL starts with @, it's also interpreted as a module request. This is useful if your webpack config has an alias for @, which by default points to /src in any project created by vue-cli

For more information : Asset URL

Upvotes: 0

Related Questions