如何解决在Vue中绑定动态img src
我想动态绑定我的图像src。 我的模板:
<template>
<div class="item">
<div class="img">
<img v-bind:src="getImg" >
</div>
</div>
</template>
我有一个计算函数:
getImg(){
var img=this.project['img'];
return require(`${img}`); // i am sure img exists
}
但是我没有找到模块错误。
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)
解决方法
您需要了解require()
(或import()
)是在构建时由Webpack处理的。 Webpack无法执行您的代码,并且可能知道运行时的值。看看docs(大约是import()
,但require()
is almost same)
简单的解决方法是仅使路径的一部分动态化,这样Webpack就会暗示应该将哪个文件可用...
尝试替换
return require(`${img}`);
作者
return require(`../assets/projects/${img}`);
并将文件名仅存储在img
变量中...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。