Currently, I am utilizing nuxt.js and attempting to display images dynamically. To achieve this, I have implemented the BASE_URL variable within the .env file, allowing me to access image files based on the set BASE_URL in my local environment.
.env file
BASE_URL = https://pctool.herokuapp.com
DB_HOST = dummy_host_name
DB_USER = dummy_user_name
DB_NAME = dummy_database_name
PASSWORD = dummy_password
in image.vue file
template
<img class="pic-0" :src="makeImagePath(product.image[0])"/>
script
methods: {
makeImagePath (img_name) {
return process.env.BASE_URL + "/product/" + img_name;
}
}
The output in the local environment is https://i.stack.imgur.com/tcPOu.png
However, upon deploying the code to Heroku, it seems that the environmental variable is not functioning correctly.
heroku env
The deployed output is:
https://i.stack.imgur.com/OGWtr.png
If I hardcode the URL as shown below, it works flawlessly:
script
methods: {
makeImagePath (img_name) {
return "https://pctool.herokuapp.com/product/" + img_name;
}
}
Nevertheless, by hardcoding the URL, it becomes static instead of dynamic. This means I would need to manually modify the URL from local to production each time I implement this concept within my project. Hence, I am seeking a way to maintain dynamic URLs to prevent any conflicts during deployment.