Having difficulty rendering image in vueJS

I am currently using the SideMenu component to display other SideMenuButton components, but I'm facing an issue where the image is not appearing. Here are the code snippets for both components:

SideMenu:

<template>
    <div id = "side-menu">
        Hello
        <SideMenuButton imgPath="../assets/lens.png"/>
    </div>
</template>

<script>
import SideMenuButton from './SideMenuButton.vue'

export default {
    name: "SideMenu",
    components:{
        SideMenuButton
    }
}
</script>

SideMenuButton:

<template>
    <div>
        <img v-bind:src="imgPath">
    </div>
</template>

<script>
export default {
    name: "SideMenuButton",
    props:{
        imgPath: String,
    }
}
</script>

Answer №1

It is essential to leverage assets resources in this manner

<img src="@/assets/lens.png"/>

Answer №2

Passing the image as a prop and utilizing the require method in the child component.

Navigation:

<template>
        <div id = "navigation-menu">
            hello
            <NavigationButton icon="home.png"/&>
        </div>
    </template>
    

NavigationButton:

<template>
    <div>
       <img :src="require(`@/icons/${icon}`)">

    </div>
</template>

<script>
export default {
    name: "NavigationButton",
    props:{
        icon: String,
    }
}
</script>

Answer №3

One issue with this method is that vue relies on webpack to bundle required resources, including images, into the dist/ directory during build time. This means that at runtime, if the image path is a variable and changes, webpack may have trouble determining the correct image.

<template>
  <div id="side-menu">
    Hello
    <SideMenuButton imgPath="imgPath"/>
  </div>
</template>

<script>
import SideMenuButton from './SideMenuButton.vue'

export default {
  name: 'SideMenu',
  components: {
    SideMenuButton
  },
  computed: {
    imgPath () {
      // webpack will substitute the given path to import() with the actual production image path
      return import('../assets/lens.png')
    }
  }
}
</script>

To address this, you may need to import() all images somewhere in your app so that webpack can include them during build time.

If you wish to explore this topic further:

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

"Encountering a problem with the client-session middleware: the value of req.session_state is becoming undefined

I'm facing an issue with client-session middleware in Express. After setting the session_state, it doesn't seem to be accessible when redirecting to a new route. I followed a tutorial on YouTube (client-session part starts at around 36:00) and do ...

Attempting to link two JavaScript files, however, only one of them is functioning correctly

I'm currently experiencing an issue with my HTML page that involves calling two JS files for two different image sliders on the same website page. One slider works perfectly fine while the other does not. I'm confused as to whether it's perm ...

Objects That Are Interconnected in Typescript

I have been delving into TS and Angular. I initially attempted to update my parent component array with an EventEmitter call. However, I later realized that this was unnecessary because my parent array is linked to my component variables (or so I believe, ...

Repeatedly animate elements using jQuery loops

Whenever I click a button, a fish should appear and randomly move over a container at random positions. However, in my current code, the animation only occurs once and does not repeat continuously. I want to create a generic function that can be used for m ...

Utilizing JQuery to extract the image title and render it as HTML code

I am currently facing an issue with displaying an image in my project. I want to hide the image using CSS (display: none) and instead, retrieve the value of its title attribute and display it within the parent div by utilizing JQuery. Despite knowing tha ...

Compile the sources of an npm dependency using Brunch

Recently, I've been facing an issue while trying to develop my web application using Brunch. The problem arises from a specific npm package called animated-vue, which consists of sources programmed in ES2016. After adding this package as a dependency ...

Does the default input default to text format?

I have a somewhat peculiar question. I'm currently experimenting with Javascript for a plugin and came across an interesting scenario. Let's say I have an input element that is structured like this: <input type='cc' id='cc&apo ...

Currently, I am attempting to retrieve text input through the use of AngularJS

Having trouble retrieving text input values using Angular JS? The console keeps showing undefined. <div ng-controller="favouritesController" class="col-xs-12 favList"> <input type="text" ng-model="newFav" ng-keyup= "add($event)" class="col-xs-1 ...

The issue of execution order in JavaScript Recursion with promises

In the process of developing a method for creating markup to be used in a web app's off-canvas navigation. One of the challenges I am facing is making an asynchronous callback to another service that provides children nodes for the parent menu node (r ...

Steps for pulling data from the Google Analytics query tool

I'm looking to retrieve my Google Analytics report using an API and save it locally. I've set up a Report in Google Analytics Explore, see attached image: https://i.sstatic.net/lkbKj.jpg From there, I can download the CSV file containing the da ...

Auth0: Unauthorized access token payload, JWT encrypted with A256GCM encryption method

Currently, I am in the process of setting up a Vue3 Single Page Application (SPA) that communicates with a NestJS API on the backend. After configuring my Auth0 tenant and client to work with the SPA, my plan is to pass the resulting JWTs to the API. Withi ...

Looking to retrieve a cookie within Vue Router in Vue 3? Utilize the following approach within your router's `index.js

Scenario: Developing a Vue3 app with express as the API backend. Express utilizes express-sessions to create a server-side session that is transmitted to the browser and received in subsequent requests. I am in the process of implementing a route guard to ...

How can I connect a jQuery slider to dynamically update a div's content?

I am trying to update the content of a Message div based on the position of my slider. Since my slider only has 5 positions, I need to display 5 different messages depending on which position is selected. Does anyone know how to accomplish this? Here is t ...

Here's how you can use welding techniques to attach objects and incorporate fin-like structures in THREE

I am currently working on a project involving a rocket ship orbiting various planets. To achieve this, I have started by creating my own rocket ship object and am aiming to model it similarly to this design: https://kyleagnew.files.wordpress.com/2018/02/lo ...

Issue encountered while adding platform in Cordova version 8.1.2

Attempting to set up a new Cordova project. The version of Cordova being used is 8.1.2 ([email protected]). I ran the cordova create command and it was successful. However, when trying to add the Android platform with the command cordova platform add ...

Calling this.$refs.upload.submit() is not providing the expected response from Element-UI

Currently working with element-ui and attempting to upload a file using the following code: this.$refs.upload.submit(); Is there a way to retrieve the response from this.$refs.upload.submit();? I have attempted the following: .then(response => { t ...

Exploring the wonders of Lightbox when dealing with content loaded via AJAX

Using Bootstrap 5 along with the Lightbox library from , I encountered an issue. The Lightbox feature functions properly on regular page loads, but fails to load on content loaded via AJAX. I attempted to resolve this by implementing the following code: ...

Show data based on the chosen destination

Recently, I've been working on creating a simple printer manager to monitor the status of all my printers. Although I have successfully displayed all the data, I'm facing an issue while trying to organize it by location. The error message I keep ...

The components for my children are not being displayed within the Drawer component in Material UI and React

Why are the Material UI components and other project components not displayed when I use my DrawerForm component? List of dependencies: react: 18.2.0 react-dom: 18.2.0 @amcharts/amcharts5: 5.3.6 @mui/icons-material: 5.11.11 @mui/material: 5.11.12 Code s ...

Exploring the depths of JSON: Unraveling the secrets of reading dynamic object data

Currently, I am receiving a JSON file from another app and my goal is to parse it in order to extract the data contained within. The JSON includes user-defined dynamic data with changing key/value pairs, which has left me feeling uncertain about how to eff ...