Webpack: Vue-cli compile image src via dynamic property

[khaled0fares]

When i reference the image source via the assets directory it works as expected and compile the image path to static one like this /static/img/img.1e7c8df.jpg

but when i use a dynamic property and pass the value of the property via the parent component,
the image path doesn't compile to /static/img/img.1e7c8df.jpg path

[LinusBorg]

you have to actually import the image in JS. then webpack knows about it as a depenency and can manage the path.

import Image from './assets/image.jpg'
// `Image` will not be a string, pointing to  '/static/img/img.1e7c8df.jpg'

[darkylmnx]

@LinusBorg does this seem logical or even easy to reason about ? Let me explain :
Assuming i have a team page on my web app, i have 50 teammates, it would be anoying to write 50 times a div + h2 + img + some description.

So i would use a loop, my image would go from 1 to 50 so i would dynamically use :src with the index of the loop.

BUT those images would be in my assets, so are you expecting someone to write 50 times and import for his images ?

Knowing that we can't loop over an import

here's a fiddle of what i mean : https://jsfiddle.net/76sythpu/

i think we need to fin another solution, importing the asset isn't a good idea if you have many dynamic assets.

Copying a folder of assets to the dist folder maybe the only solution for now... I'd like to re open this issue to discuss about that

[LinusBorg]

Well, that's how webpack works for dynamic assets. You still have options, though.

1. use the /static folder as explained here.
2. Use a dynamic require to make webpack require all images in one call, as explained here

I won't go into much detail (for that we have forum.vuejs.org).

[maximilianfixl]

I hope that I get a answere here, though its closed.
I can‘t understand that I can load an image from the laravel /public/ images directory, but not from /storage/app/public!
If image file name and subfolder is dynamic. Could anybody explain it to me? Please!?

[LinusBorg]

Please use the forum, as I mentioned in my last reply.

This is a closed isssue.

[maximilianfixl]

I did already

https://forum.vuejs.org/t/get-path-from-storage-directory-inside-vue-component-in-laravel-5-5/21646

[kaankucukx]

<img :src="require(`@/assets/${posts.img}`)" alt="">

🥇

[david-saint]

Hi @kaankucukx ,
What if I want to add it to the style tag like
<div class="left" :style="backgroundImage: require(assets/img/${image}.png);">
How should I go about this?

[kaankucukx]

@david-saint Hey,

Go with this.. ;)

<div class="left" :style="`backgroundImage: require(assets/img/${image}.png)`">

Check this by Addy. https://developers.google.com/web/updates/2015/01/ES6-Template-Strings

[david-saint]

Thanks @kakahikari
this worked

<div class="left" :style="{backgroundImage: `url(${require(`../assets/img/${image}.png`)})`}">

[nicobaguio]

@kaankucukx may I ask what the $ sign means here? This also worked with my Vue app and I don't know what's happening.

[nfer]

@nicobaguio

Template Strings can contain placeholders for string substitution using the ${ }

you can get more info on link as kaankucukx mentioned: https://developers.google.com/web/updates/2015/01/ES6-Template-Strings

[kaankucukx]

@nicobaguio Hey,

its ES6 feature called Template Literals. you can check it from the link @nfer mentions. or below one!

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

[ghost]

<img :src="require(@/assets/login.png)" alt="">
<img src="@/assets/login.png" />
same but shorter

[rimiti]

@kaankucukx you saved my morning 🚀

[revolter]

I keep getting the Cannot find module error, even though the path is correct.

[bigsee]

Note that you can also use the following syntax to avoid needing to remember the relative paths...

<div
    class="picture"
    :style="{ backgroundImage: `url(${require(`@/assets/images/${image}`)})` }">

...where @ signifies your src folder and image is the full filename.

[oelbaganwg]

OMG I've been researching this for 3 hours. Finally stumbled on this. Works! Thank you!

[aacassandra]

thank you @kaankucukx, your suggestion is to work with charm, but your code is not beautiful with vue framework

thank you @LinusBorg, your advice is to work very beautiful

import Image from "../../assets/img/services/s1.png";
export default {
   data () {
     return {
       myPic: Image;
     }
   }
}

<img v-bind:src="myPic" />

tested on vue cli 3

[kaankucukx]

@aacassandra Thank you!
And you mean importing all images is fine? :)

So good luck with that. I believe that is uglier :(

[aacassandra]

thank you @kaankucukx, you remind me. I just found out that the way it loads all the images.

[fralonra]

I did something like <img :src="require(@/assets/logo.png)" >
But it gave me an error that Critical dependency: the request of a dependency is an expression
Anyone can help?

I'm using:
webpack v4.28.4
vue v2.6.10
@vue/cli-service v3.6.0

[TotomInc]

@fralonra you are missing quotes on @/assets/logo.png.

Your :src attribute should looks like this :src="require('@/assets/logo.png')".

[fralonra]

@TotomInc Thanks for your reply!
That's just a typo.
I tried :src="require('@/assets/logo.png')" and the warning still exists.

[routbiplab]

Try this:

file.html
<img v-bind:src="image">

file.js
image:require('@/assets/tutorial/onWhite.jpg'),

[fralonra]

@routbiplab
It was my fault not pointing out what I want to do.
I want to load image dynamically, by setting image path in a variable like logo.

There is a trick can do it: require('@/assets' + logo), but logo cannot start with '@/assets' in this way.

However, if all images are under a same folder like @/assets, I can set logo begin with '@/assets', and then remove this prefix in the require expression, like: require('@/assets' + this.logo.split('@/assets')[1]).

But I still wonder if there is a way to archive this goal without doing these tricks?

[baagi-rebel]

the alt attribute is working fine but src attrib. is not working. Can anybody explain?????? PLZ!!!
<food-items itemPrice= 239 itemName="Desert" image="./assets/images/desert.jpg" altText="image here from app"></food-items>// App.vue
<img :src="image" :alt="altText"> //component food-item

[fralonra]

@baagi-rebel
See here. https://github.com/vuejs-templates/webpack/issues/126.
In short, you should use require or import to tell webpack that this path should be treated as a module.

[hoainamcr]

Hi, I can't display image, this is my code.
<img :src="require('@/assets/images/logo.png')" />
but it just diplay after rendered
<img data-v-359d76e0="" src="[object Module]" class="">
Do you know why it return [object Module]? please help me to resolve it :(

[hoainamcr]

Hi, I can't display image, this is my code.
<img :src="require('@/assets/images/logo.png')" />
but it just diplay after rendered
<img data-v-359d76e0="" src="[object Module]" class="">
Do you know why it return [object Module]? please help me to resolve it :(

Oh, I found the solutiton. just install url-loader :( OMG, thank you guys so much.

[juniorknx]

This works for me!! thanks