binding dynamic img src in vue

Question

I want to bind my image src dynamically. my template:

<template>
    <div class="item">
        <div class="img">
            <img v-bind:src="getImg" > 
        </div>
    </div>
</template>

I have a computed function:

 getImg(){
            var img=this.project['img'];
            return require(`${img}`); // i am sure img exists
        }

but i got module not found error .

Uncaught (in promise) Error: Cannot find module '../assets/projects/sample.jpg'
    at webpackContextResolve (eval at ./src/components sync recursive ^.*$ (app.js:1247), <anonymous>:15:11)
    at webpackContext (eval at ./src/components sync recursive ^.*$ (app.js:1247), <anonymous>:10:11)
    at Proxy.getImg (ProjectItem.vue?624f:26)
    at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js?a1e9:42)
    at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:790)
    at Object.get [as getImg] (runtime-core.esm-bundler.js?5c40:5387)
    at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/components/ProjectItem.vue?vue&type=template&id=210d7dcc&scoped=true&bindings={"project":"props","key":"props","getImg":"options"} (app.js:986), <anonymous>:21:19)
    at Proxy.eval (runtime-core.esm-bundler.js?5c40:1154)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:535)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4286)

Michal Levý · Accepted Answer · 2020-09-13 10:21:14Z

2

You need to understand that require() (or import()) is handled by Webpack at build time. Webpack can't execute your code and possibly know what the value at runtime will be. Take a look at the docs (it's about import() but require() is almost same)

Simple fix would be to make only part of the path dynamic so Webpack gets at leas some hint what file should be made available...

Try to replace

return require(`${img}`);

by

return require(`../assets/projects/${img}`);

and store just the file name in the img variable...

answered Sep 13, 2020 at 10:21

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

binding dynamic img src in vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related