Yeoman is not updating the changes made to picture file names in HTML

I am currently working on an Angular app using Yeoman and overall, I find the experience quite enjoyable. However, there is one issue that has been bothering me.

Whenever I build and deploy my project with grunt serve:dist, all the images I have used end up broken. This happens because Yeoman changes the filenames of each image, but neglects to update the HTML links. Surprisingly, it does update the corresponding CSS files.

For example, if I have an image named default_picture in my HTML like this:

<img src="../images/default_picture.jpg" alt="#">

After building the project, Yeoman changes the file name of the image from default_picture to something like default_picture.cbed2a58.jpg, without updating the src attribute in the img tag. As a result, the images no longer point to valid files in the directory structure.

I have searched through the Yeoman project on Github extensively, but haven't found a solution to this issue.

Is there a way for me to resolve this problem by either properly updating the HTML or preventing Yeoman from changing my image file names?

javascripthtmlcssangularjsyeoman

Answer №1

I found a workaround for the issue by simply commenting out a specific line:

// Disables file renaming for browser caching purposes
filerev: {
    dist: {
        src: [
            '<%= yeoman.dist %>/scripts/{,*/}*.js',
            '<%= yeoman.dist %>/styles/{,*/}*.css',
            // '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
            '<%= yeoman.dist %>/styles/fonts/*'
        ]
    }
}

In my case, this change was made on line 214 within the Gruntfile.js. There may be a more permanent solution available, but for now, this serves as a temporary fix.

Answer №2

It appears that Usemin does not search in subsubfolders by default, unless specified otherwise (as shown in the snippet from the gruntfile.js below):

// Performs rewrites based on filerev and the useminPrepare configuration
    usemin: {
      html: ['<%= yeoman.dist %>/{,*/}*.html', '<%= yeoman.dist %>/views/{,*/}*.html'],
      css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
      options: {
        assetsDirs: ['<%= yeoman.dist %>','<%= yeoman.dist %>/images']
      }
    }

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

Struggling to get your background image to display correctly with CSS?

Having some trouble with the code in my index.html file. The style.css pages are correctly linked, and all other elements are working fine. .fullbox { border: 1px solid orange; background-image: url(background-image:url(/images/topmain.jpg) no-repea ...

htmlcss

What is the best way to extract a string from a JSON object array?

I'm encountering an issue retrieving any of the strings from the JSON data provided by the Google Finance API. When debugging, I keep getting "undefined." In the example below, my main focus is on extracting the symbol (t) and the current price (l). ...

javascriptjson

What is the process for binding attributes using v-bind with a one-time binding?

Currently, I am utilizing the vue-i18n library for localization purposes. An issue I have encountered is when attempting to translate input placeholders using the following syntax: <input type="text" v-model="someValue" :placeholder="$t('translati ...

javascriptvue.jsvuejs2vue-i18n

JQuery is used to create a pop-up box

As a newcomer to JQuery, I am working on implementing a pop-up box on my webpage. Utilizing a jQuery plugin derived from Ray Stone's leanModal: (function($) { $.fn.extend({ leanModal: function(options) { var defaults = { top: 10 ...

javascriptjqueryhtmlcsspopup

AngularJS does not recognize a dynamically created array when using ng-include with ng-repeat

Issue with ng-repeat Directive I have encountered a problem where the ng-repeat directive does not track the addition of a new array, specifically 'options'. This issue arises when the directive is used within a template displayed using ng-dialo ...

javascriptangularjsng-dialog

Want to learn how to create a draggable uploaded image on a canvas, similar to the functionality of Google

I have a question regarding the draggable feature in Canvas elements. I uploaded an image into the canvas and would like it to be draggable, similar to Google Maps. My ultimate goal is to enable zoom in and out functionalities as well. Is this achievable ...

javascripthtmlcanvas

Delete the top row from the table

After extensive searching on various websites, I am still unable to resolve my html or CSS issue. An unexpected line is appearing above the table here. Here's the code snippet that is causing trouble: <table border="0" width="840" cellspacing="0" ...

htmlcsshtml-table

BootStrap's Carousel Slide Animation Glitch

When testing the carousel demo on Bootstrap, I noticed that the slides move smoothly together. As I navigate to the next or previous slide, the current one transitions out while the new one transitions in. However, my copied version of the code resulted i ...

cssbootstrap-4

Delete the initial double line break and then switch the remaining double line breaks to single line breaks

I am facing an issue with some HTML content fetched from an external source. My aim is to specifically target instances of double br tags using jQuery. I want to delete the first occurrence of double br and convert all subsequent occurrences into single br ...

jqueryhtml

Tips for adjusting the hover size in a navigation bar

I'm currently learning how to use bootstrap and I'm attempting to create a navbar that shrinks when scrolled down, and I also want the hover effect on the links to be full-height. I've tried multiple approaches but haven't been successf ...

jqueryhtmlcssbootstrap-4

Tips on smoothly transitioning an object along a path in an HTML5 Canvas and ensuring that the previous object's residue does not linger behind

Is there a way to smoothly move an object over a line in HTML5 without leaving old objects behind? I need help achieving a seamless movement of a ball across a line. var canvas = document.getElementById('myCanvas'); var context = canvas.getCon ...

javascriptcsshtmlcanvas

Using CSS margins for elements lacking specific widths

Is there a way to centrally align a div element that doesn't have a set width? <html> <head> <title></title> <style type="text/css"> .outer { padding: 10px; /*margin: auto; (doesn´t work)*/ ...

htmlcsscentering

Navigating through the nested object values of an Axios request's response can be achieved in React JS by using the proper

I am attempting to extract the category_name from my project_category object within the Axios response of my project. This is a singular record, so I do not need to map through an array, but rather access the entire object stored in my state. Here is an ex ...

javascriptreactjstypescriptreact-reduxjsx

The high chart data is failing to load

I am brand new to highchart and have just started learning how to create a simple pie chart in HTML. Unfortunately, I am having trouble getting it to work properly. Everything seems correct to me, but for some reason, the highchart is not populating. Here ...

jqueryhtmlhighcharts

Using PHP, assign a reference to a class member

Trying to create a JSON server response in PHP has been quite the task. Using an array in my output to monitor errors and successes within the script has been helpful. Take a look at the code snippet below for a better understanding. <?php $output = ar ...

javascriptphparraysjson

What sets apart window.app=new Vue({}) versus const app = new Vue({}) when included in app.js within a Vue.js environment?

What exactly is the difference between using window.app and const app in main.js within Vue? import question from './components/Questions.vue'; Vue.http.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken; window.App = new Vue({ ...

javascriptlaravelvue.js

Trouble accessing Login.html page

Working on a web server project for my job has been both challenging and rewarding. One recurring issue I have encountered is with the login page not redirecting me to the main page and failing to accept the username or password. The codebase was originall ...

javascriptpythonhtmlubuntu-serverbootstrap-5

Searching dynamically using class names with JQuery

I am seeking to create a dynamic search input based on the class names within the span tags. However, I am struggling with displaying the class name that I have identified. My goal is to show the class names that match the entered value in the input on the ...

javascripthtmljquerycss

Next.js encountered an error while trying to locate the flowbite.min.js file for Tailwindcss and Flowbite, resulting in a

I'm having an issue with integrating the flowbite package with TailwindCSS in my Next.js application. Despite configuring everything correctly, I am encountering an error when adding the flowbite.min.js script: GET http://localhost:3000/node_modules/f ...

javascriptnext.jstailwind-cssnext.js13flowbite

What is the best practice for updating state immutably in React using Redux and Redux Toolkit?

As I delve into learning Redux, I've come across a method called addPosts which allows me to add posts to my list. Here's how I'm implementing it: import { createSlice } from "@reduxjs/toolkit"; const initialState = [{ number: 1 } ...

javascriptreactjsreduxreact-reduxredux-toolkit