Utilize Vue-cli 3.x to load static resources

Question

Utilize Vue-cli 3.x to load static resources

In my vue-cli 3 project, I have organized the static assets in the public directory. When compiled and built on localhost, all assets load successfully, except for some images not appearing in the browser.

Despite guyana-live-logo.png, slide-1.jpg, and 970x250-ad.png being loaded correctly, only the logo and ad image show up in the browser as depicted below:

What I've attempted

Alteration of the image reference method.

Original - works for most images

<img src="/img/slide-1.jpg"/>

Test 0 - appended a hash to the image name (slide-1.1b0ahsa.jpg) but still no display in the browser

<img src="../../../public/img/slides/slide-1.jpg">

Test 1 - used v-bind

<img :src="'/img/slide-1.jpg'"/>

Relocation of the image within the src directory and component sub-directory, both without success.
Updating vue-loader
Production build with sole serving of the /dist folder

Important points

No errors shown on console or bug tracking tool.
The image format doesn't seem to be the issue, as some .png/.jpg files load while others don't.
Some JavaScript files are also affected and called like this:
```
<script type="text/javascript" src="<%= BASE_URL %>js/script.js"></script>
```
in public/index.html

javascript vue.js vue-cli-3

Answer 1

Answer №1

To ensure the images are accessible, they should be located in the same directory as the file you are trying to access them from, or in a subdirectory like the Components directory.

Have you attempted accessing the image through its URL? Use

<img src="http://localhost:8080/img/guyana-live-logo.png" />

and see if it works for you.

This method should be effective, but there might be reasons why you prefer not to use it this way.

An alternative approach you can consider is:

<script>
import image from './img/slide-1.jpg'
...

In your Vue data:

  data() {
    return {
      img: image,
    };
  },

In your HTML:

<img :src="image"/>

By following these steps, you can resolve any challenges faced when attempting to access images while working with Parcel Bundler.

Answer 2

To ensure the images are accessible, they should be located in the same directory as the file you are trying to access them from, or in a subdirectory like the Components directory.

Have you attempted accessing the image through its URL? Use

<img src="http://localhost:8080/img/guyana-live-logo.png" />

and see if it works for you.

This method should be effective, but there might be reasons why you prefer not to use it this way.

An alternative approach you can consider is:

<script>
import image from './img/slide-1.jpg'
...

In your Vue data:

  data() {
    return {
      img: image,
    };
  },

In your HTML:

<img :src="image"/>

By following these steps, you can resolve any challenges faced when attempting to access images while working with Parcel Bundler.

Utilize Vue-cli 3.x to load static resources

What I've attempted

Important points

Answer №1

Similar questions

How can I create an onclick link within an alert message using JavaScript, even when the alert is not consistently displayed?

Error: The provided `anchorEl` property for this component is invalid

OpenLayers had trouble handling the mouse event in Ionic

Storing uploaded files with multer in a Node.js environment using JavaScript

Setting MUI input value within a loop using an array value in React JS: A step-by-step guide

Node.js unleashes the power of Ajax

Using Elasticsearch's bulk feature to set unique identifiers(_id) for documents

Connecting Vue to external data sources

Transitioning from GeometryUtils.merge() to geometry.merge()

What is the best way to implement OTP expiration time in Next.js using Firebase?

Verify the presence of a JSON object in Postman

Transferring data from a JavaScript struct array to GLSL

Display loading icon in AngularJS during template retrieval

`initMap` does not exist as a function

Issue with vue-select and buefy CSS not rendering properly in production environment with NUXT.JS

What could be causing my Vue Router to not direct to my component?

JavaScript HTTP Requests

Trouble Displaying DHtmlX Scheduler Events on Safari and Internet Explorer

What is the best way to initiate an animation once the one before it has finished?

Issue with JavaScript variables (I presume) - there seems to be a conflict when one variable is used alongside another