What is the best way to showcase images using Vue.js?

For my Vue project, I am encountering issues with the image paths not working properly. Despite trying different variations, such as:

<figure class="workout-image">
            <img :src= "images.bicep" width= "200px" length= "300px">
            <figcaption>Bicep Curl</figcaption>
          </figure>
        
         <figure class="workout-image">
            <img :src= "'https://thumbs.dreamstime.com/z/bench-press-exercise-chest-man-doing-workout-bench-press-exercise-chest-man-doing-workout-barbell-bodybuilder-157558597.jpg'" width= "200px" length= "300px">
            <figcaption>Bench Press</figcaption>
          </figure>

          <figure class="workout-image">
            <img v-bind:src= "'../assets/images/workouts/TricepExtension.png'" width= "200px" length= "300px">
            <figcaption>Tricep Extension</figcaption>
          </figure>

The images are located in the src/assets folder with the full path being src/assets/images/workouts. However, instead of displaying the image, an icon indicating a broken image appears. image not showing up

It is worth noting that I do not include anything in the img tag.

javascriptimagevue.js

Answer №1

If your assets folder is located within your src folder, vue-loader will automatically load them for you. You can then access these assets using the syntax: "@/assets/rest/of/path".

<figure class="workout-image">
    <img src="@/assets/images/workouts/TricepExtension.png" width= "200px" length= "300px">
    <figcaption>Bicep Curl</figcaption>
</figure>

Check out this specific section on how vue handles asset URLs

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In Node.js, JavaScript, when using SQLite, the variables are inserted as Null

I have spent a lot of time searching and trying various methods, but I am still unable to solve this issue. My goal is to insert 8 variables received from an API call into an SQLite table. Although the execution seems correct, when I query the table, all v ...

javascriptnode.jssqliteexpress

The data received from the frontend is being replicated in the backend, causing duplication issues in a React

Whenever I click the button labeled onClick, it triggers the transmission of data (both time and ID) to the backend. The issue at hand is that the backend seems to be receiving the data twice instead of just once. On inspecting req.body, it becomes eviden ...

javascriptnode.jsreactjsrest

How can you hide all siblings following a button-wrapper and then bring them back into view by clicking on that same button?

On my webpage, I have implemented two buttons - "read more" and "read less", using a Page Builder in WordPress. The goal is to hide all elements on the page after the "Read More" button upon loading. When the button is clicked, the "Read More" button shoul ...

javascripthtmlcss-selectorsevent-handlingdom-events

Encountering a problem with Chrome Extension localization upon installation - receiving an error message claiming default locale was not specified, despite having

Error Message: "The package has been deemed invalid due to the following reason: 'Localization was utilized, however default_locale was not specified in the manifest.' Issue: I have developed a customized extension and defined a default locale, ...

javascriptjsongoogle-chromegoogle-chrome-extensionmanifest

I'm looking for a way to fetch data using axios, store it in an array, and then pass that array to a Vue.js component as props in order

Assuming you have a custom component named upload-csv Vue.component('upload-csv',{ props:['clientnames'], template:` <ul> <li v-for="clientname in clientnames">{{ clientname.name }}</li> </ul> ...

vue.jsvuejs2

Create a left-aligned div that spans the entire width of the screen, adjusting its width based on the screen size and positioning it slightly

I have a parent container with two child elements inside. I want the first child to align to the left side and the second child to align to the right side, but not starting from the exact center point. They should be positioned slightly off-center by -100p ...

javascriptcssreactjsmaterial-uijsx

Exploring VueJs 3's Composition API with Jest: Testing the emission of input component events

I need help testing the event emitting functionality of a VueJs 3 input component. Below is my current code: TextInput <template> <input v-model="input" /> </template> <script> import { watch } from '@vue/composition-api&ap ...

javascriptvue.jsjestjsvue-composition-apivuejs3

Having trouble with ESLint in VSCode? The ESLint extension seems to be ignoring linting rules after starting a new project within VSCode

I recently started using the ESLint extension in my VSCode editor for my React project. After creating the starter files, I ran the following command in my terminal: eslint --init This allowed me to choose the AirBnb style guide with React, which generat ...

javascripttypescriptwebpackvisual-studio-codeeslint

Mismatched units px and rem (existing fixes are ineffective)

Recently, I attempted to implement custom sass in a project at work. However, when running npm watch, I encountered the error: Incompatible units px and rem. The root of the issue seems to be in _variables.scss where the following line resides: $input-h ...

csslaravelvue.jssassbootstrap-4

Updating and eliminating text within an array of objects using Vue JS

My Axios request pulls in an array of objects named 'uniquecolors'. Here is what it looks like: mycolors color: [GREEN, RED, BLUE, YELLOW, ORANGE,ORANGE,GREEN,] color: [GREEN, RED, BLUE, YELLOW, ORANGE,ORANGE,GREEN,] color ...

javascriptvue.js

Attempting to manipulate information within the @click event handler embedded within a v-for loop

I am using a v-for loop to select dialog boxes that I want to open. <v-card @click="page.model = true"> In this code, page.model is being used as the v-model for a v-dialog component. data() { return { dialog1: false, dia ...

javascriptvue.jsvuetify.js

The error message "ch.match is not a function" appeared in the Javascript code

Here are two functions that I need help with: //Function A var ltrToNato = function(ch) { var x = ch; var nato = ('{"A": "Alpha", "B": "Bravo", "C": "Charlie", "D": "Delta", "E": "Echo", "F": "Foxtrot", "G": "Golf", "H": "Hotel", "I": "India" ...

javascriptjsonfunction

Climbing the ladder of function chains, promises are making their

Here is the code structure that I've created to upload multiple files to a server using AJAX. After all the uploads are complete, it should perform a certain action. function uploadFiles(files){ const results = [] for (let i=0; i<files.length; i ...

javascriptajaxpromise

Error: Preflight request returned a 405 HTTP status code when querying Ionic + CI backend

I am currently working on my first app using ionic with a codeigniter backend. However, I am encountering the "Response for preflight has invalid HTTP status code 405" issue in ionic + CI backend. Can anyone help me solve this problem? This is my controll ...

javascriptangularjscodeigniterionic-frameworkcodeigniter-3

Switch out regex with an equal number of characters

I am looking for a way to replace specific content using a regex with the same number of characters but replacing them with a character of my choice. For instance: content: "abcdefghi*!?\"asd"; should be transformed into: content: "--------------- ...

javascriptregex

Tips on placing custom loading components in Nuxt/Vue applications

I recently used nuxt and followed a helpful guide on creating a custom loading component. You can find the instructions here While the custom loader does work, I noticed that it appears in the same position as the original nuxt loader bar: https://i.stac ...

vue.jspositionloadingloadernuxt.js

Significant Google Maps malfunction detected with API V3

Update: Issue resolved, check out my answer below. The scenario: User interacts with a map-image google maps API V3 is loaded using ajax the map is displayed in a dialog window or lightbox What's going on: The map loads and all features are funct ...

javascriptjqueryajaxgoogle-mapsgoogle-maps-api-3

Submit a form to the same page without reloading and toggle the visibility of a div after submission

Is there a way to submit a form without refreshing the page and hiding the current div while showing a hidden one? I attempted to use the following code, but it ends up submitting the form and reloading the page. <form method="post" name="searchfrm" a ...

phpjavascripthtml

Tips for selecting a specific item in a list using onClick while iterating through a JSON array in React

I have a unique JSON file filled with an array of objects, each containing a "Question" and "Answer" pair (I am working on creating an FAQ section). My current task involves mapping through this array to display the list of questions, a process that is fun ...

javascriptjsonreactjsreact-hooksmaterial-ui

Is there a way to update the value of a variable with the help of a checkbox?

When I check the checkbox, the specOrder const gets updated as expected. However, I am struggling to figure out how to remove the value when the checkbox is unchecked. Below is the code I have been working on: const SpecialtyBurgers = () => { cons ...

javascripthtmlreactjs