Difficulty displaying SVGs in VueJS when using Typescript

I'm facing a strange issue that seems like it should be easy to solve. When using Vue with JavaScript as CDN, everything works perfectly (just like it does in Angular or any other framework).

<img src="/assets/images/icons/myicoin.svg>

However, when I try to do the same thing using webpack (and TypeScript), it doesn't work when accessing the SVG directly.

http://localhost:8080/assets/images/icons/myicoin.svg

Instead of displaying the icon, it tries to render the entire app.

I attempted to use vue-svg-loader, but it seems overly complicated and doesn't provide the desired outcome.

Does anyone have any suggestions on how to configure webpack to leave SVGs untouched and treat them like any other image resource?

Interestingly enough, if I include the SVG as an external resource from a different domain, it works perfectly fine.

typescriptvue.js

Answer №1

If you're not aware, here's a quick tip:

DO NOT place static assets such as photos (including SVGs) in the src/assets folder; instead, store them in public/assets

All static assets belong in the public folder, which will be seamlessly copied over during the build process!

Hopefully this information proves useful to someone out there!

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

Update the data type to non-null following successful validation

Consider the code snippet below: const publicPath: string | undefined = config.output && config.output.publicPath invariant(publicPath, "No publicPath for config: ${config}") // declare const publicPath: string // error After the invariant functi ...

typescript

Step-by-step guide on incorporating an external JavaScript library into an Ionic 3 TypeScript project

As part of a project, I am tasked with creating a custom thermostat app. While I initially wanted to use Ionic for this task, I encountered some difficulty in integrating the provided API into my project. The API.js file contains all the necessary function ...

javascriptxmlangulartypescriptionic-framework

Determine whether there are a minimum of two elements in the array that are larger than zero - JavaScript/Typescript

Looking for an efficient way to determine if there are at least two values greater than 0 in an array and return true? Otherwise, return false. Here's a hypothetical but incorrect attempt using the example: const x = [9, 1, 0]; const y = [0, 0, 0]; c ...

javascripttypescript

Vuejs: Develop an intermediate component that utilizes one of the props and passes on all other content to the <button> element

Just getting started with Vue and struggling to articulate the problem, possibly a duplicate issue. We have a common pattern in our codebase where there is a button accompanied by a message depending on whether the button is disabled. Here's a simpli ...

htmlvue.jsvuejs2

What is the best way to modify an object within a pure function in JavaScript?

Currently, I am exploring different strategies to ensure that a function remains pure while depending on object updates. Would creating a deep copy be the only solution? I understand that questions regarding object copying are quite common here. However, ...

javascriptreactjstypescript

What are the best methods for testing a function containing multiple conditional statements?

I have a complex function that I want to showcase here, it's quite simple but for some reason, I'm struggling with writing unit tests for it. I don't need the exact unit test implementation, just a general approach or tips on how to handle i ...

javascriptangulartypescriptunit-testingif-statement

FabricJS Canvas with a React DropDown Feature

While I have successfully created a TextBox on FabricJS Canvas, creating a Dropdown component has proven to be a challenge. The fabric.Textbox method allows for easy creation of text boxes, but no such built-in method exists for dropdowns in FabricJS. If y ...

javascriptreactjstypescriptfabricjs

Incorporating a parameter into a <div> only when the parameter holds a value

Being new to web development, I have a rather basic query. If the datainfo prop variable is not empty, I'd like to include a data attribute in the div tag. <div style={{height: props.height - handleHeight()}} data={datainfo ? datainfo : ""}> C ...

javascriptreactjstypescriptjsx

Is there a way to determine the most recent Typescript target compatibility for every Node version?

When using any version of Node, how can I identify the appropriate Typescript Compiler Option for target that offers the most functionality? I want to eliminate any guesswork. Specify the ECMAScript target version as: "ES3" (default), "ES5", "ES6"/"ES20 ...

node.jstypescriptcompiler-optionsecma

methods for extracting json data from the dom with the help of vue js

Can anyone help me with accessing JSON data in the DOM using Vue.js? Here is my script tag: <script> import axios from "axios"; export default { components: {}, data() { return { responseObject: "" }; }, asy ...

javascriptvue.jsvuejs2

Tips on utilizing a pre-defined parametrized selector within the createSelector function

My goal is to create a selector based on a parametrized selector. I believe this approach will only emit when a specific item is updated, which aligns with my requirements. const getFeatureState = createFeatureSelector<FragmentsHierarchyState>(MY_FE ...

typescriptreduxngrx

Struggling to fetch a DropDown menu from an Array in ReactJS

Trying to utilize an array of City Names in a Auto Complete text field within ReactJS. The array is successfully printed, but encountering difficulty displaying the list in the browser's Dropdown. An error message is being displayed in the browser r ...

javascriptreactjstypescript

Why am I unable to use a string as the src in next/image component?

After importing the Image module with the code import Image from "next/image";, I encountered an error that states: The type '{ src: string; }' cannot be assigned to type 'IntrinsicAttributes & ImageProps'. The type &apo ...

reactjstypescriptnext.js

Utilizing Typescript to define key-value pairs within a structured form

I've been creating a form structure that's functioning smoothly, but I've encountered an interesting issue with field validation in the validation part. While my Visual Code is pointing out that 'required2' in the phone constant n ...

typescripttyping

Classifying Union Types based on their distinct characteristics

There is a specific type with its own unique property (method) type Functions = { method: "connect", request: number, response: number, } | { method: "remove", request: string, response: string, } I aim to create a function that can handle inp ...

typescriptgenericstypescript-typingstypescript-generics

I encountered a TypeScript error while utilizing the useContext hook in a React application

Initially, I set the value of createContext to an empty object {}. Afterwards, I provided a context with a new value of {username: 'sasuke1'}. However, when I attempt to access the property Context.username, TypeScript raises the following error: ...

javascriptreactjstypescript

What configuration changes do I need to make in my Rails application.rb file to enable CORS requests?

Utilizing Rails as a backend API to support a VueJS frontend, I aim to trigger a POST request from VueJS upon pressing a button on the website using axios. methods: { signup() { if (this.password === this.password_confirmation) { t ...

ruby-on-railsvue.jspostaxioscors

Steps to resolve the 'form' variable being assigned a value but never used in axios:

I am encountering an issue with a contact form that utilizes React with axios on the frontend and Express with nodemailer on the backend while running locally. The expected outcome is for me to receive an email when I click the "Submit" button. However, up ...

reactjstypescriptexpressaxiosnodemailer

What is the reason for the presence of additional mandatory dependencies in the package-lock.json file?

The recent release of React includes breaking changes to the TypeScript typings, causing packages that require "@types/react" with a wildcard version to automatically target this new version and break my project. Initially, I wanted to reach out to projec ...

javascriptreactjstypescriptwebpackpackage.json

Compiling TypeScript files with an incorrect path when importing, appending "index" at the end of the @angular/material library

I'm currently working on creating a library to collect and distribute a series of Angular components across various projects, with a dependency on angular/material2. My objective is to eventually publish it on npm. However, I've encountered an i ...

javascriptangulartypescriptangular-material2