Menu
I need to load an image (from my file system and not url) dynamically with vuetify. However, when I bind a path variable in v-img element, vue cannot find it. When I put it statically using the "required" method, it is ok.
How can I choose a dynamic path with vuetify? Is this a problem with the file loader?
I expect to select the image in run time dynamically. For example, if I have "next" button, I want to load the next image. Here is the code in Vue.js
<html>
<v-img
v-bind:src="require(myPath)"
aspect-ratio="1.5"
max-height="500"
contain
/>
</html>
<script>
data: () => ({
mycount: 1,
myPath: "../myimages/2.png"
})
</script>
[Vue warn]: Error in render: "Error: Cannot find module '../myiamges/2.png'" found in ---> at src/App.vue vue.runtime.esm.js:619 Error: "Cannot find module '../imyimages/2.png'" webpackEmptyContext components sync:2 render Gamesheet.vue:30 VueJS 21 run es6.promise.js:75 notify es6.promise.js:92 flush _microtask.js:18 vue.runtime.esm.js:1888
313
After a long research and tries I found the answer of my own question.
The problem here is with the method "require". It needs to know the folder where the images are, during the compilation, when I use a dynamic path. See here. So giving the path including the file name dynamically won't enable the "require" method to identify the folder only. That was imy interpretation.
So I modifed the code like this and it worked for me:
<html>
<v-img
v-bind:src="require('../myimages/' + myFilename)"
aspect-ratio="1.5"
max-height="500"
contain
/>
</html>
<script>
data: () => ({
mycount: 1,
myFilename: "2.png"
})
</script>
In this case, I could change myFilename in the runtime and it worked as well.
173
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With