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

React Alert Remove Alert: Each item in a list must be assigned a distinct "identifier" prop

How can I resolve the React warning about needing a unique "key" prop for each child in a list? I'm trying to eliminate the warning that says: "Each child in a list should have a unique key prop." The code snippet causing this warning is shown below ...

javascriptreactjs

What is the best way to create fading text effects in an AngularJS application?

Running an AngularJS web application that showcases three words for 5 seconds each: Hello, World & Goodbye. The controller setup is as follows: self.currentIndex = 0; self.myTexts = ['Hello', 'World', 'Goodbye']; self.cu ...

javascriptangularjs

Refreshing a Node.js server page upon receiving a JSON update

My web application serves as a monitoring interface for tracking changes in "objects" processed by the computer, specifically when they exceed a certain threshold. The Node Js server is running on the same machine and is responsible for displaying data in ...

javascriptjsonnode.js

JavaScript date input formatting with HTML

When using the input date picker in HTML, the default format displayed is MM-DD-YYYY. <input type="date" id="gdatum" /> Is there any method to change the mask to DD-MM-YYYY? ...

javascripthtmldatedatepicker

Text field in React's material-ui causes the screen to shake

I am encountering an issue with a simple React code that includes a Material-UI Textfield. Whenever I try to enter data into the text field, the screen shakes. Additionally, when I click outside of the box after entering data, the screen shakes again. Ca ...

javascriptreactjsmaterial-ui

Error encountered: unable to locate module - '@deck.gl/exper-layers'

When attempting to run npm start on the trip example in deck.gl, I encountered an issue. Although other examples open without any problems, the trip example is giving me this npm error: Module not found: Error: Can't resolve '@deck.gl/experim ...

javascriptjavadictionarynpmcommand

Having trouble identifying whether a file is a picture or video based solely on its extension

My current challenge involves determining whether an uploaded file is a video or a photo. This distinction is crucial as it dictates whether the file should be sent to my telegram bot as a video or photo attachment. Despite having what seems like a logica ...

javascriptnode.jsexpressformidable

What are some alternative ways to redirect multiple pages in a Navbar component in React Js without encountering the 'useNavigate()' error?

How can I resolve this error while working with react js? Error: useNavigate() is only allowed within a <Router> component. ▶ 3 stack frames were collapsed. Navbar C:/Users/dell/OneDrive/Desktop/ReactJs/react-learning/src/components/Navbar.js:9 ...

javascriptreactjsreact-routerreact-router-dom

Different time parameter for setting a timeout in Javascript

I am struggling to create a slideshow with varying time intervals for each image. My knowledge of Javascript is limited, and I have been working on resolving this issue for quite some time. /* function ShowEffect(element){ new Effect.Appear(element, ...

javascripthtml

Issue encountered while utilizing property dependent on ViewChildren

Recently, I designed a custom component which houses a form under <address></address>. Meanwhile, there is a parent component that contains an array of these components: @ViewChildren(AddressComponent) addressComponents: QueryList<AddressCo ...

javascriptangularangular2-templateangular2-forms

Code snippet that will emphasize the active page if there are multiple pages, such as highlighting page 2

My current project involves implementing a script to highlight the current page on a Tumblr blog. I found the script I am using here: $(function(){ $('a').each(function() { if ($(this).prop('href') == window.location.href) { ...

javascriptjqueryhtml

Automating the selection of a drop down based on a condition in Angular 2: A step-by-step guide

I'm facing an issue with a drop-down menu where no default value is selected. On my homepage, I need to automatically select an option based on query parameters. I've attempted various methods but none have been successful. Below is the code snip ...

javascriptangularangular5

Utilize HTML5 localStorage functionality

I have a good understanding of utilizing HTML5 localStorage with methods like localStorage.getItem/setItem. However, I am currently trying to figure out the implementation for a dynamic page. Let me explain the scenario: On my dynamic page (myPage.jsp), ...

javascriptajaxhtmllocal-storagedwr

React Form with Conditional Input Options and Validation

Just diving into the world of React, I find myself connecting a React frontend to a Flask backend in a group project. Surprisingly, I've ended up handling about 90% of the workload. While I have utilized MUI for implementing fields, my focus is more o ...

javascriptreactjsreact-hooksmaterial-uireact-hook-form

Exploring the concept of reflection in JavaScript and jQuery

Here is a javascript object I have: person.Name = "John"; person.Nick = "Smith"; person.Info = "hi there"; In addition, I have some HTML elements as shown below: <input id="Name" /> <input id="Nick" /> <input id="Info" /> My question ...

javascriptjqueryjsonreflection

Guide on applying CSS to option tag within a select element in VUE.js

I am attempting to design a dropdown menu that resembles the one shown in the image. However, I'm currently unable to include any CSS styling. Can anyone provide guidance on how to create a customizable select dropdown in Vue? https://i.stack.imgur.c ...

javascriptcssvue.js

Generating a list of objects from an array of strings

I am currently facing an issue in my code and I could use some help with it. Below are the details: I have a array of string values containing MAC addresses and constant min & max values. My goal is to map over these MAC values and create an array of obje ...

javascriptreactjs

Having issues with Cypress testing of Material-UI datepicker on Github actions

Encountering an unusual issue while running Cypress tests in a GitHub action environment. The MUI datepicker is stuck in readonly mode, preventing any input of dates (works fine in other setups). Error displayed by Cypress CypressError: Timed out retryin ...

javascriptreactjsmaterial-uicypressgithub-actions

The $POST method is failing to update the information

I've encountered an issue with my script that I can't seem to figure out. After numerous tests, it seems like the main problem lies within the Ajax request. Interestingly, I have used the Ajax request successfully in a previous version of my scri ...

phpjavascriptjqueryajaxajax-request

Notification within the conditional statement in React JS

I am working on validating phone number input within a React JS component using an if/else statement. If the user enters letters instead of numbers, I want to display a message saying "please check phone number". While I have been able to create a function ...

javascriptreactjsvalidationreact-hooks