Wednesday, 20 January 2021

How to use dynamic local image in vue?

I'm trying to show dynamic images depending on a selected option (using the template shown below), but when I deploy the app, I think Webpack changes the image filename. How can I prevent this renaming?

<select v-model="geturl">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div v-if="geturl">
    <img
        :src="require(`@/assets/images/${geturl}.jpg`)"
        style="height:250px; width:250px; object-fit:cover;">
</div>

If I change the options in dev mode, I can see the images; but when I deploy the app, the image filename converts to 1.zxc123.jpg.

Folder structure



from How to use dynamic local image in vue?

No comments:

Post a Comment