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 retrieve the children of a component in React?

`The error "mockResolvedValue is not recognized as a function when using partial mocks in Jest with Typescript

Fetching Information From Database Using PHP

What are the steps to modify the sign in page on keystone.js?

Utilizing JavaScript for selecting a radio button on click event

Mapping arguments as function values

Having trouble transferring information from a form to a page because of the error message " is not defined"?

Leverage server-side data processing capabilities in NuxtJS

What is preventing the use of this promise syntax for sending expressions?

Configuring CORS in an Angular JS controller

Organizing JSON keys based on their values using Typescript

What is the best way to handle JSONp response parsing using JavaScript?

Try utilizing MutationObserver to monitor changes in various nodes

What is the jQuery alternative for the classList property in vanilla JavaScript?

How can I sync changes between two variables in node.js?

Is it possible to transform an array into a JSON file and securely store/upload it in an AWS S3 bucket?

What is the best way to integrate JavaScript libraries into my NPM build process?

Why does Next.js throw an error when using an additional <div></div>?

Leverage axios over fetch calls within Workbox

When should the preloader be placed within the DOMContentLoaded or load event?