Adding an external link in the `require()` function within the `src` attribute of an `<img>` tag

Question

Adding an external link in the `require()` function within the `src` attribute of an `<img>` tag

I am facing a similar issue to the one described in this question here: Linking to images referenced in vuex store in Vue.js

The main difference is that I am dealing with an external link for the src attribute of an img tag, like 'https://....'

Is there a way for me to use require() with this external link? I understand that require() typically only takes a path, but I need something similar that can be executed during compile time.

Thank you for any assistance you can provide!

javascript image vue.js nuxt.js

Answer 1

Answer №1

Dealing with a similar issue, I managed to find a solution that may not be ideal in terms of speed and pre-rendering, but it did the job for me. Even though it's not exactly what you were seeking in terms of using require('URL'), it served as a workaround that was acceptable for my needs. Essentially, displaying an image from an external URL worked for me even in dev mode. Here is how I implemented it:

<template>
  <div>
    <img :src="imgURL" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgURL: ''
    }
  },
  mounted() {
    // On mounted, construct the URL string and assign it to a variable in data
    this.imgURL = baseURL+dynamicURL
  }
}
</script>

Answer 2

Dealing with a similar issue, I managed to find a solution that may not be ideal in terms of speed and pre-rendering, but it did the job for me. Even though it's not exactly what you were seeking in terms of using require('URL'), it served as a workaround that was acceptable for my needs. Essentially, displaying an image from an external URL worked for me even in dev mode. Here is how I implemented it:

<template>
  <div>
    <img :src="imgURL" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgURL: ''
    }
  },
  mounted() {
    // On mounted, construct the URL string and assign it to a variable in data
    this.imgURL = baseURL+dynamicURL
  }
}
</script>

Adding an external link in the `require()` function within the `src` attribute of an `<img>` tag

Answer №1

Similar questions

How can JavaScript be used to create a unique signup and login process on

Deleting all JSON files in a directory using NodeJs

Stop the selection of text within rt tags (furigana)

Automatically create the web.config file upon executing the command "npm run build"

Execute a function within a different function once the ajax call has been completed

Can the mDNS string received through webRTC be decoded to retrieve a user's IP address?

Retry request with an AngularJS interceptor

Nodejs application encountering a problem with the findUser method in Active Directory

Angular displays error ERR_UNKNOWN_URL_SCHEME when attempting to retrieve an image saved in a blob

Adding embedded attributes from a different object

Sending STATIC_URL to Javascript file in Django

Encounter an error parsing the package.json file. Confirmed that it is valid JSON

Experiencing problems with images in vue-cli? Look no further, as we dive into troubleshooting with

Is there a way to dynamically create a property and assign a value to it on the fly?

Error TS2322: The function expecting a type of 'FormEventHandler<HTMLFormElement>' cannot be assigned the type '(data: TicketFullDTO) => Promise<void>'

Utilize React Material UI to dynamically update state with Slider interactions

Guide to creating an asynchronous function

Looking for a pattern that combines Browserify and Angular?

Invoking Javascript Functions using their names

Tips for invoking a url with JavaScript and retrieving the response back to JavaScript