I am attempting to pass an image url dynamically to my Vue application, but it doesn't seem to be working. I'm starting to question if this is even achievable in Vue / Vuetify. Please confirm if this functionality is possible.
<v-img
class="white--text align-end"
height="200px"
src="{{ book.imageUrl }}"
>
It is recommended by KaelWD in a discussion on this platform to utilize the require() function for your image links.
<v-img
class="white--text align-end"
height="200px"
:src="require(`${book.imageUrl}`)"
/>
A solution is definitely possible, but there seems to be a syntax error in your code.
Instead of using just src, you should use :src=
:src="book.imageUrl"
By adding a colon in front of the attribute, the framework will recognize it as executable code.
Without the colon, "{{ book.imageUrl }}" will appear as a regular string.
Have you attempted this yet?
:src="book.imageUrl"
In my opinion, it seems that using {{var}} to assign a variable to an attribute of a Vue component may not work as expected.
In a recent project, I utilized the following code snippet:
:src="require('../../assets/img/logos/' + vendor.vendor_identifier + '.png')"
When using Webpack, it's important to limit the possible files by including part of the path as a literal string, or even better, the entire path.
For more information, refer to the documentation: https://webpack.js.org/guides/dependency-management/#require-with-expression
Although the method mentioned by others is correct, make sure to include half of the path inside
require('../../assets/img/logos/'){{book.imageUrl}}?
To troubleshoot, start by hard coding the link/path in book.imageUrl and check for any errors.
In recent projects I've worked on using React and Vue.js, I have utilized .env variables to store API URLs for micro services and other configuration settings that are used throughout the root project. However, when it comes to child components insta ...
Utilizing Axios for fetching data from my backend endpoint has been resulting in a 404 error. Oddly enough, when I manually enter the URI provided in the error message into the browser, it connects successfully and returns an empty object as expected. Her ...
Summary My Nuxt.js project was created using the command yarn create nuxt-app in SPA mode. However, I encountered an error after installing Storybook where running yarn dev resulted in failure to start the demo page. ERROR Failed to compile with 1 errors ...
Method for editing an existing note with Vue.js in a web application This particular application enables users to perform the following tasks: Create a new note View a list of all created notes Edit an existing note Delete an existing note Prog ...
Struggling with a function that authenticates on a website, it runs smoothly in a basic node.js script but fails when executed from a .vue page within the NuxtJS framework. The error message received when running in the .vue page is TypeError: axiosCookie ...
Seeking advice on how to effectively loop through a JSON object like the one provided below using v-for. My goal is to iterate over all ID's/Numbers and the items within each number, then display them in a list format... I'm aware that I can easi ...
I have a fairly simple component: <template> <div> <chart v-if="!loading" ref="priceGraph" constructor-type="stockChart" :options="chartData" ...
The issue I'm facing is with the hiddenColumns option not working as expected. Even when I set it to hiddenColumns:['name'], the name column remains visible. I've updated to the latest version, but the problem persists. UPDATE I am tr ...
Currently, I am utilizing Nuxt, including SSR, PWA, Vuejs, Node.js, Vuex, and Firestore. I am seeking guidance or examples regarding the following: How can I ensure the security of an API key, such as for accessing the MailChimp API? I am unsure of how v ...
Within my parent component, I am using a MyGrid component to display data. Inside MyGrid, I have logic that checks the type of each item and applies a class called typeSquare if it meets certain criteria. To maintain the simplicity and "dumbness" of MyGr ...
For a clearer understanding of my requirements, I have put together a demo on JSFiddle: https://jsfiddle.net/silentway/aro5kq7u/3/ The code snippet is presented below: <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id=" ...
I have been working on a hybrid application using vuejs and ruby on rails, and I am trying to figure out how to translate the error messages that are generated by the server. While I have managed to translate the titles easily with a method, I am strugglin ...
I have an array of objects like this: const data = [{id: 3, name: ''}, {id: 4, name: ''}, {id: 5, name: '', parent: 3}, {id: 6, name: '', parent: 5}, {id: 7, name: '', parent: 4}, {id: 8, name: '&ap ...
Looking to develop a Vue application with the feature of adding to desktop, similar to the option near the share button on YouTube. Any suggestions on how to achieve this? https://i.stack.imgur.com/nXG4i.png ...
My goal is to show only the values stored in local storage, excluding the key value that displays all data after submitting the login form. welcome <span id="demo"></span>; <script> document.getElementById('demo').innerHTML = ...
In simplifying the component I aim to create, I have created the following code structure: // MyComp.vue <script setup lang="ts"> import { PropType, defineProps, defineEmits } from 'vue'; const props = defineProps({ modelVal ...
I have an application built in Vue3 that plays a sound when a QR code is scanned. This feature works perfectly on Android and the web, but not when using the browser on iOS. I am struggling to identify the issue. Can anyone provide some insight? <qrco ...
Can someone share the optimal method for integrating published Adobe Animate CC HTML5 canvas / JS files into a Vue.js component? Appreciate it ...
I've been struggling with this issue for hours. I'm using vuejs' v-for to render items in <select> element's <options>, but I keep getting a type error. I've tried changing the :key values, but it still won't rende ...
Is there a way to apply a background color to specific cells in a particular column without affecting the others? It seems like Vue doesn't have this built-in functionality. I found a tutorial on applying backgrounds to entire rows, but I'm look ...